html animated presentation

DEV Community

Posted on Jan 11, 2019

How To Build A Captivating Presentation Using HTML, CSS, & JavaScript

Building beautiful presentations is hard. Often you're stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Well not anymore.

Today, we're going to learn how to create a stunning and animated presentation using HTML, CSS, and JavaScript.

If you're a beginner to web development, don't fret! This tutorial will be easy enough to keep up with. So let's slide right into it!

We're going to be using an awesome framework called Reveal.js . It provides robust functionality for creating interesting and customizable presentations.

Head over to the Reveal.js repository and clone the project (you can also fork this to your GitHub namespace).

Change directories into your newly cloned folder and run npm install to download the package dependencies. Then run npm start to run the project.

The index.html file holds all of the markup for the slides. This is one of the downsides of using Reveal.js; all of the content will be placed inside this HTML file.

Built-In Themes

Reveal includes 11 built-in themes for you to choose from:

Changing The Theme

Open index.html
Change the CSS import to reflect the theme you want to use

The theme files are:

solarized.css

Custom Themes

It's quite easy to create a custom theme. Today, I'll be using my custom theme from a presentation I gave called "How To Build Kick-Ass Website: An Introduction To Front-end Development."

Here is what my custom slides look like:

Creating A Custom Theme

Open css/theme/src inside your IDE. This holds all of the Sass files ( .scss ) for each theme. These files will be transpiled to CSS using Grunt (a JavaScript task runner). If you prefer to write CSS, go ahead and just create the CSS file inside css/theme.
Create a new .scss file. I will call mine custom.scss . You may have to stop your localhost and run npm run build to transpile your Sass code to CSS.
Inside the index.html file, change the CSS theme import in the <head> tag to use the name of the newly created stylesheet. The extension will be .css , not .scss .
Next, I created variables for all of the different styles I wanted to use. You can find custom fonts on Google Fonts. Once the font is downloaded, be sure to add the font URL's into the index.html file.

Here are the variables I chose to use:

Title Font: Viga
Content Font: Open Sans
Code Font: Courier New
Cursive Font: Great Vibes
Yellow Color: #F9DC24
Add a .reveal class to the custom Sass file. This will wrap all of the styles to ensure our custom theme overrides any defaults. Then, add your custom styling!

Unfortunately, due to time constraints, I'll admit that I used quite a bit of !important overrides in my CSS. This is horrible practice and I don't recommend it. The reveal.css file has extremely specific CSS styles, so I should have, if I had more time, gone back and ensured my class names were more specific so I could remove the !importants .

Mixins & Settings

Reveal.js also comes with mixins and settings you can leverage in your custom theme.

To use the mixins and settings, just import the files into your custom theme:

Mixins You can use the vertical-gradient, horizontal-gradient, or radial-gradient mixins to create a neat visual effect.

All you have to do is pass in the required parameters (color value) and voila, you've got a gradient!

Settings In the settings file, you'll find useful variables like heading sizes, default fonts and colors, and more!

The structure for adding new content is:

.reveal > .slides > section

The <section> element represents one slide. Add as many sections as you need for your content.

Vertical Slides

To create vertical slides, simply nest sections.

Transitions

There are several different slide transitions for you to choose from:

To use them, add a data-transition="{name}" to the <section> which contains your slide data.

Fragments are great for highlighting specific pieces of information on your slide. Here is an example.

To use fragments, add a class="fragment {type-of-fragment}" to your element.

The types of fragments can be:

fade-in-then-out
fade-in-then-semi-out
highlight-current-blue
highlight-red
highlight-green
highlight-blue

You can additionally add indices to your elements to indicate in which order they should be highlighted or displayed. You can denote this using the data-fragment-index={index} attribute.

There are way more features to reveal.js which you can leverage to build a beautiful presentation, but these are the main things which got me started.

To learn more about how to format your slides, check out the reveal.js tutorial . All of the code for my presentation can be viewed on GitHub. Feel free to steal my theme!

Top comments (18)

Templates let you quickly answer FAQs or store snippets for re-use.

Joined Oct 2, 2018

I really love reveal.js. I haven't spoken in a while so I haven't used it. I've always used their themes and never thought about making my own. This is probably super useful for company presentations, too. I'm SO over google slides. Trying to format code in those is a nightmare LOL

Location Stockholm
Education Siena College
Work Software Engineer at Spotify
Joined Dec 21, 2018

Yeah it is time consuming, but the result is much better

Location Antibes, France
Work Senior Software Engineer at Spotify
Joined Oct 16, 2017

The best thing in this - and now I'm not being ironic - is that while you work on a not so much technical task - creating a presentation - you still have to code. And the result is nice.

On the other hand, I know what my presentation skills teachers would say. Well, because they said it... :) If you really want to deliver a captivating presentation, don't use slides at all. Use the time to prepare what you want to say.

I'm not that good - yet, but taking their advice, if must I use few slides, with little information on them and with minimal graphical distractions. My goal is to impress them by what I say, not is what behind my head.

I'm going to a new training soon, where the first day we have to deliver a presentation supported by slides at a big auditorium and the next day we have to go back and forget about the slides and just get on stage and speak. I can't wait for it.

Location Lake Villa, IL
Education Bachelor in Electronics Engineering
Work Computer & Technology Enthusiast
Joined Oct 8, 2017

How about github.com/team-fluxion/slide-gazer ?

It's my fourth attempt at creating a simple presentation tool to help one present ideas quickly without having to spend time within a presentation editor like Microsoft PowerPoint. It directly converts markdown documents into elegant presentations with a few features and is still under development.

Location Singapore
Work Web Developer at FirstCom Solutions
Joined Jan 15, 2019

Yup, RevealJS is awesome !

Previously I either used PPT or Google Slides. One is a paid license and the other requires an internet connection.

The cool thing about it is that since it's just HTML files behind the scenes, the only software you need to view it with is a web browser. Has amazing syntax-highlighting support via PrismJS. And as a web developer, it makes it simple to integrate other npm packages if need be...

I actually just used it to present a talk this week!

Email [email protected]
Location Indianapolis, IN
Education Purdue University
Pronouns he/him
Work Senior Frontend Engineer at Whatnot
Joined Aug 3, 2017

Great article, Emma! I love Reveal and this is a great write up for using it!

Email [email protected]
Location New Delhi, India 🇮🇳
Joined Dec 5, 2018

I think its a coincidence 😅 I was just starting to think to use reveal.js and suddenly you see this post 🤩

Location Saratoga Springs,NY
Education BA, University of Michigan
Work Documentarian
Joined Sep 7, 2018

Check out slides.com If you want to skip the heavy lifting and/or use a presentation platform based on reveal.js.

Everything is still easy to customize. The platform provides a UI to work from and an easy way to share your stuff.

BTW - I have no affiliation with slides.com, or even a current account. I used the service a few years back when I regularly presented and wanted to get over PowerPoint, Google Slides, Prezi, etc.

Location Toronto, ON
Education MFA in Art Video Syracuse University 2013 😂
Work Cannot confirm or deny atm
Joined May 31, 2017

Well I guess you get to look ultra pro by skipping the moment where you have to adjust for display detection and make sure your notes don’t show because you plugged your display connector in 😩 But If the conference has no wifi then we’re screwed I guess

Location Palm Bay, FL
Education FullSail University
Work Developer Relations Manager at MetaMask
Joined Sep 16, 2018

I like Reveal, but I still have not moved past using Google docs slides because every presentation I do has to be done yesterday. Hoping that I can use Reveal more often this year as I get more time to work on each presentation.

Email [email protected]
Location Abuja Nigeria
Work Project Manager Techibytes Media
Joined Feb 19, 2019

Well this is nice and I haven't tried it maybe because I haven't spoken much in meet ups but I think PowerPoint is still much better than going all these steps and what if I have network connection issues that day then I'm scrolled right?

Email [email protected]
Joined Apr 16, 2018

Using Node and Soket.io remote control (meant to be used on phones) for my school's computer science club, it also features some more goodies which are helpful when having multiple presentations. It can be modded to use these styling techniques effortlessly. Feel free to fork!

SBCompSciClub / prez-software

A synchronized role based presentation software using node, prez-software.

TODO: Make system to easily manage multiple presentations Add Hash endocing and decoding for "sudo" key values TODO: Document Code

Run on Dev Server

npm i nodemon app.js Nodemon? - A life saving NPM module that is ran on a system level which automatically runs "node (file.js)" when files are modified. Download nodemon by running npm i -g nodemon

Making a Presentation

Copy an existing presentation folder
Change the folder name (which should be located at public/slides) with the name day[num of day] ex(day2)

Making a Slide

Making a slide is pretty simple. Just add a HTML section. <section>  </section> inside the span with the class of "prez-root". Also keep in mind that you will need to copy and pate the markup inside the prez root to the other pages (viewer & controller).

Adding Text

You may add text however you desire, but for titles use the…

Awesome post! I’m glad I’m not the only one who likes libraries. 😎

Location Los Angeles
Education Engineering, Physics, and Math
Joined Sep 6, 2018

Fantastic post. I just loved it.

Location France
Work Co-Founder of Depot
Joined Sep 2, 2017

Awesome introduction! I feel like I need to give this a try the next time I create a presentation.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

[DAY 15-17] I Got My First Web Dev Certification & Started Learning Javascript

Thomas Cansino - May 25

PHP vs. Node.js: A Full-Stack Developer’s Guide to Choosing the Right Technology

Epithermal - May 26

Google's IDX: The Future of Web Dev? AI Assistant Makes Coding

TheDev - May 25

Simple Method to Block Copy and Paste in Monaco Editor with React

Ritish Shelke - May 24

We're a place where coders share, stay up-to-date and grow their careers.

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

Product Management
Solve User-Reported Issues
Find Issues Faster
Optimize Conversion and Adoption
Start Monitoring for Free

Web animations with HTML, CSS, and JavaScript

Introduction

Many years ago, websites were more focused on displaying information to users without consideration for how to create visual experiences to make the site more user-friendly. In the past few years, many things have changed: website owners are now creating visual experiences to keep users on their site.

An illustration of a man staring at a computer.

Developers discovered human beings tend to pay more attention to moving objects because of our natural reflex to notice movement.

By extension, adding animations to your website or application is a very important method of drawing users’ attention to important areas of your website and revealing more information about a product.

Note : Effective animations are capable of building a strong connection between users and the content on the screen.

What is web animation?

Web animation is basically just making things move on the web.

Web animation is necessary for creating eye-catching websites that enable better conversions and attract users to click, view, and buy things on your website.

When done well, animations can add valuable interaction, enhance the emotional experience for users, and add personality to your interface.

Presently, there are hundreds of libraries, tools, and plugins that can be used for creating animations ranging from simple to complex. With CSS Animation, it becomes unnecessary to make use of plugins that slow down your website speed for animations that can be done easily with CSS.

In this article, I will be showing you some animations that can be achieved with HTML, CSS, and JavaScript.

What CSS properties can I animate?

It’s one thing to know how to animate, and it is another thing to know what to animate.

Some CSS properties are animatable, meaning that they can be used in animations and transitions.

These are properties that can change gradually from one value to another, such as size, color, numbers, shape, percentage, e.t.c.

Over 200k developers use LogRocket to create better digital experiences

We can animate properties like background, background-color, border color, filter, flex, and font.

You can get a comprehensive list of all of the properties you can animate here .

Different kinds of animations

There are so many different kinds of animations that are very well-used in websites and play a very important role in user experience.

These include:

Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element.

In other words, it is a brief, informative message that appears when a user interacts with an element in a graphical user interface (GUI).

Tooltips may contain brief helper text about their functions:

The hover pseudo-class is used to add a special effect to an element when you guide your mouse over it. This way, it has the ability to catch users’ attention as soon as they hover over an item.

It is a useful way to show which elements are clickable.

Loadings are very essential because they helps to keep the user entertained during load time. They also inform users of the level of progress, or how much time is left until a load is complete.

Input animations are great and often combined with tooltips and validations. With inputs, the user is able to quickly fix errors and fill missing fields to complete forms.

Animations on menus play a great role in UI/UX. Menus are types of animations that amaze the user and keep them interactive allowing them to see all the content throughout the page.

Note : There are many other animations like page transition, parallax, etc.

CSS animation

So far, we have seen so many different kinds of animations that can be achieved with CSS, but I haven’t explained how it’s done.

CSS allows us to animate HTML elements without making use of JavaScript.

To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold the styles that the element will have at certain times.

For proper understanding, I will be explaining the basic properties we will be using.

The CSS animations are made up of two basic building blocks:

keyframes are used to indicate the start and end of the animation (as well as any intermediate steps between the start and end).

It’s composed of 3 basic things:

Animation name : This is simply the name given to the animation, as illustrated in the picture above.
Animation stages : This indicates the stages of the animation. It’s mostly represented as a percentage, as shown in the picture above.
Animation style or CSS properties : These are the properties expected to change during the the animation.

Animation properties

Once the @keyframes are defined, the animation properties must be added in order for your animation to function.

This is primarily used to define how the animation should happen.

The animation properties are added to the CSS selectors (or elements) that you want to animate.

Two properties are very essential to notice how the animation takes effect. They are the animation-name and the animation-duration .

There are other properties like:

animation-timing-function : Defines the speed curve or pace of the animation. You can specify the timing with the following predefined timing options: ease , linear , ease-in , ease-out , ease-in-out , initial , inherit .
animation-delay : This property defines when the animation will start. The value is defined in seconds (s) or milliseconds (ms).
animation-iteration-count : This property specifies the number of times an animation should be played.
animation-direction : This CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.
animation-fill-mode : This property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).
animation-play-state : This property specifies whether the animation is running or paused.

The next big question on your mind will be: Do I have to specify all these properties anytime I want to animate an element?

Actually, no.

We have the animation shorthand property. Each animation property can be defined individually, but for cleaner and faster code, it’s recommended that you use the animation shorthand.

All the animation properties are added to the same animation: property in the following order:

Note : For the animation to function correctly, you need to follow the proper shorthand order and specify at least the first two values.

See the Pen simple landing by Olawanle Joel ( @olawanlejoel ) on CodePen .

Here is a very simple landing page for a shirt store.

I decided to add a very little animation to the shirt so it can grab users attention as soon as they visit this link.

All I did was apply the transform property and translate it vertically (up and down). You can take your time to check through the code.

Why JavaScript?

As you read through, you might start asking yourself why JavaScript was included in the topic. You will see why now!

So, why JavaScript?

We make use of JavaScript to control CSS animations and make it even better with a little code.

See the Pen Form Validation with Html, Css & Javascript by Olawanle Joel ( @olawanlejoel ) on CodePen .

In the above code, I created a form to collect user details, but I want the form fields to shake if there is no input.

With the help of CSS, I can make them shake:

In the above code, the input field will move to and fro (left to right) with 5px and then finally return to its initial position at 100% (we use the CSS transform property to achieve that as seen in the code above).

Then, we add the animation properties to the CSS selector error:

The next thing is: How will I know if these fields are empty and the user clicks the submit button?

This is where JavaScript comes in. We use JavaScript to control our animation.

Step 1 : Check if the form submit button has been clicked. Step 2 : Select all form fields. Step 3 : Check if the input fields are empty. Step 4 : Add the CSS selector using JavaScript classList property. You can read more about the classList property here .

Note : I properly added comments to the JavaScript and CSS code in the embedded codepen so you can easily understand the code.

Once the form is submitted with all the appropriate information, some bubbles will begin to slide up. This was achieved with CSS animation.

These are just a few things you need to know about web animation. Remember, this is a very broad topic but I know you saw the importance of animation and why you should think of making use of CSS animation for your projects.

LogRocket : Debug JavaScript errors more easily by understanding the context

Debugging code is always a tedious task. But the more you understand your errors, the easier it is to fix them.

LogRocket allows you to understand these errors in new and unique ways. Our frontend monitoring solution tracks user engagement with your JavaScript frontends to give you the ability to see exactly what the user did that led to an error.

LogRocket records console logs, page load times, stack traces, slow network requests/responses with headers + bodies, browser metadata, and custom logs. Understanding the impact of your JavaScript code will never be easier!

Try it for free .

Stop guessing about your digital experience with LogRocket

Developing web extensions with the WXT library

Browser extensions are an important part of the web ecosystem. They make our lives easier and enhance our web browsing […]

Bulma CSS adoption guide: Overview, examples, and alternatives

Explore how Bulma CSS simplifies frontend development with its ease of use and customizable, responsive, pre-designed UI elements.

Using Mountaineer to develop a React app with Python

Develop a React app with Python using the Mountaineer framework for building a simple app with integrated your frontend and backend database.

Enhance CSS view transitions with Velvette

Velvette is a utility library developed to make working with view transitions easier.

5 Replies to "Web animations with HTML, CSS, and JavaScript"

Best way to tell the animation property

Nice one bro

I’ve always shied away from CSS animations because I didn’t really pay attention to how it’s down.

This is a very helpful guide for someone like myself.

This was very helpful, nice one bro

The HTML Presentation Framework

Created by Hakim El Hattab and contributors

Hello There

reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.

Vertical Slides

Slides can be nested inside of each other.

Use the Space key to navigate through all slides.

Basement Level 1

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

Basement Level 2

That's it, time to go back up.

Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at https://slides.com .

Pretty Code

Code syntax highlighting courtesy of highlight.js .

Even Prettier Animations

Point of view.

Press ESC to enter the slide overview.

Hold down the alt key ( ctrl in Linux) and click on any element to zoom towards it using zoom.js . Click again to zoom back out.

(NOTE: Use ctrl + click in Linux.)

Auto-Animate

Automatically animate matching elements across slides with Auto-Animate .

Touch Optimized

Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.

Add the r-fit-text class to auto-size text

Hit the next arrow...

... to step through ...

... a fragmented slide.

Fragment Styles

There's different types of fragments, like:

fade-right, up, down, left

fade-in-then-out

fade-in-then-semi-out

Highlight red blue green

Transition Styles

You can select from different transitions, like: None - Fade - Slide - Convex - Concave - Zoom

Slide Backgrounds

Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.

Image Backgrounds

Tiled backgrounds, video backgrounds, ... and gifs, background transitions.

Different background transitions are available via the backgroundTransition option. This one's called "zoom".

You can override background transitions per-slide.

Iframe Backgrounds

Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.

Marvelous List

No order here

Fantastic Ordered List

One is smaller than...
Two is smaller than...

Tabular Tables

Clever quotes.

These guys come in two forms, inline: The nice thing about standards is that there are so many to choose from and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Intergalactic Interconnections

You can link between slides internally, like this .

Speaker View

There's a speaker view . It includes a timer, preview of the upcoming slide as well as your speaker notes.

Press the S key to try it out.

Export to PDF

Presentations can be exported to PDF , here's an example:

Global State

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the page background.

State Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Take a Moment

Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.

Right-to-left support
Extensive JavaScript API
Auto-progression
Parallax backgrounds
Custom keyboard bindings

- Try the online editor - Source code & documentation

75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

Enjoy this 100% free and open source collection html and css animation code examples. these css animations will impress your visitors, 1. css animations with svgs, 2. only css animation, 3. only css animation #01, 4. pure css "eye", 5. close the blinds, 6. rock'n'roll half-marathon animation.

I recreated and animated the design from my half-marathon t-shirt (http://kylephx.com/h/las-vegas-half.jpg)

7. Sausage Dog CSS Only Animation

8. evening lanterns, 9. letter css animation, 10. 2020 svg animation | using pathlength=1 with stroke-dashoffset tutorial, 11. the three-body problem.

Inspired by Liu Cixin's sci-fi novel The Three-Body Problem I built this pen

12. Only Css 3D Cube

13. css block revealing effect, 14. only css: motion blur, 15. css typewriter 📄, 16. only css animation, 17. animation with offset motion blur, 18. ➰📃 paper pirouette | 3d css-only flying page animation tutorial.

David Khourshid and Stephen Shaw recreate a beautiful 3D isometric flying paper animation using CSS only! ⏰ Streamed live on September 16, 2019 at https://twitch.tv/keyframers 💡 Inspiration: https://dribbble.com/shots/7127901-Dialog/attachments/131339 📺 Video: https://youtu.be/Fdq95qVG... Read More

19. The Perpetual Mobile. (Elastic Bounce)

The rotation movement is not directly related to the movement, so there are no obvious repetitions and the animation is more attractive.

20. Product Page | CSS Keyframes Animation

21. circle becomming square, 22. sticker, 23. ui elements - svg animation, 24. fake variable font with css, 25. h2o - chemical flask (animation).

CodePen Challenge - water. SVG chemical flask is slightly animated with CSS.

26. ROCK 🎸

27. submarine animation (pure css), 28. css cassette.

Original artwork by Sailesh Gunasekaran on dribbble

29. CSS Box Dog

I did my best at recreating this awesome animation by Tony Babel with CSS only. Original: https://dribbble.com/shots/4934623-Box-Doggie Also this pen by David Khourshid https://codepen.io/davidkpiano/pen/Xempjq helped me figure out the tail animation

30. Whale And The Moon

Inktober Day 12 Prompt: Whale Not everyday you see a whale, do you?

31. Candles (Pure CSS Animation)

Recreated the dribbble shot by Gal shir. in complete CSS Animations. Here is the link https://dribbble.com/shots/2516854-Candles .

32. Coffee Machine Pure CSS Animation

33. solar eclipse.

Conceptualized from our company blitz

34. CSS Lighthouse Scene

35. bits & bytes | css animation.

Had fun bringing to life this illustration. Originally created for https://raygun.com/

36. Pure CSS "Moustached Nanny"

37. dot menu animations.

Four different menu animations for menu button toggle between dots, cross and back icon. Prefer Hamburgers? Go this way: https://codepen.io/Zaku/details/ejLNJL/ Additional Source: https://github.com/tamino-martinius/ui-snippets-menu-animations

38. Books Hover Animation

39. magnifying glass scrolling loop animation, 40. the handbook download animation, 41. connected animation.

this might only work in chrome! Transitioning on calc is likely not legal

42. Windmill (Pug + SCSS) - Responsive + Animated

So after a lot of requests... Here's again a lovely animated #Windmill to blow your mind letting your imaginations flow... Literally. 😜 This kinda reminds me of that "Floating Windmill" scene over the clouds in "Feel Good Inc." music video by @gorillaz. Don't you think? 🤔

43. CSS Mask Animation

44. css animation: time of day, 45. get attention animations.

Sometimes you want to draw attention to an element on your page. Some of these are subtle. Some of them are not.

46. CSS Animation: Indoors Or Outdoors?

Recently was involved in a project where we had to do animations. We used After Effects > JSON > some plugin magic for it but I was wondering if I could replicate the exact same effect with CSS. ... YES I CAN :D Icons: flaticon.com.

47. CSS-only Border Animation

CSS-only border animation on hover. It needs a solid background in order to work.

48. Pure CSS Saturn Hula Hooping

49. pure css "sponge", 50. perspective grid w/animation // css grid.

I often see this type of skewed image design for apps and websites, as well as graphic design portfolios. What if we animated that into an image gallery? This gallery utilizes CSS Grid Layout and CSS3 perspective to create something a little unique.

51. CSS Reveal Animation Text And Image

An css animation that reveals the text and image with delay / direction

52. Flat Design Amusement Park Svg By Lina (animation Powered By CSS)

Here's an svg from my lovely Lina - her flat design amusement park for debut dribbble shot, animated by me with power of pure css3, made here at Zajno https://dribbble.com/shots/2747921-Flat-Vector-Ferris-Wheel-Animation

53. Animated Back Glow

Psuedo Element + Background Gradient Animation + Blur = Badass

54. Cool Layout With Complex Chainable Animation

55. card swipe animation material design.

Card swipe animation based on this Dribbble: https://dribbble.com/shots/1721120-Keynote-animation-recreation

56. CSS & SVG Waves Animation

I wanted to animated waves for the background of a page. Initially I tried a staggered loop animation in Javascript, but some mobile devices struggled really bad. This CSS3 version is hardware accelerated, simple, and is much more performant.

57. CSS Animation Material Design

58. pure css animated bubbles.

Animated Bubbles using nothing but HTML and CSS.

59. Animated Shopping Cart Icons

Just experimenting with some SVG animations and interactivity for a "Fake Fruit Shop". Chrome only for now.

60. Signature Animation

Pure CSS, lightweight signature animation.

61. Cloudy Spiral CSS Animation

Started building a loading indicator but ended up with this... thing.

62. CSS Flame Animation

An animated flame using only CSS3 animations and box-shadow. Wanted to see if I could make fire with just CSS - flame on! :)

63. Animated - SVG Birds

64. animated - svg snow, 65. tricky css hover.

Experimenting in 3d, VR inspired card layout feat. skateboarding theme

66. Info Cards Concept

67. pure css card animation, 68. efeito - button shake.

Desafio 30 dias CSS - dia 22

69. Breadcrumb Animation

This animation simulates breadcrumbs falling from top of the header

70. Efeito - Loader Animado

Desafio 30 dias CSS - dia 16

71. Pure CSS Set Of Cards Animation

Hover the set of cards to trigger the unfolding animation

72. Image Animation

73. fancy card animation.

An animation that activates when you hover over a card! Demo by Simon Codrington accompanying the article "Seven Creative UI Design Ideas You Can Use In Your Next Website" for SitePoint.

74. Animated Info-cards

Clean and intuitive interface : showcasing extraneous details on hover. Still need to make it responsive to make it look perfect for mobile devices .

Create HTML5 animations with WebAnimator - WebAnimator

Boost your online projects

What is WebAnimator?

Who's it for?

Why WebAnimator?

Create animations and interactive web content.

Unleash your imagination

Simple interface

Drag & Drop

Preset Effects

Responsive display, animated backgrounds.

Banners, menus and buttons

Interactive slideshows

Made with webanimator.

Javascript Function

Morph Animations

Interactivity

Motion Path

Shapes and Freeforms

Sprite Sheet

Guides, Tutorials and Support

5 of the Best Free HTML5 Presentation Systems

Share this article

Google Slides Template

Frequently asked questions (faqs) about html5 presentation systems.

I have a lot of respect for Microsoft PowerPoint. It may be over-used and encourages people to create shocking slide shows, but it’s powerful and fun. I have just one criticism: all PowerPoint presentations look the same. It doesn’t matter how you change the colors, backgrounds, fonts or transitions — everyone can spot a PPT from a mile away. Fortunately, we now have another option: HTML5. Or, more specifically, HTML5 templates powered by JavaScript with CSS3 2D/3D transitions and animations. The benefits include:

it’s quicker to add a few HTML tags than use a WYSIWYG interface
you can update a presentation using a basic text editor on any device
files can be hosted on the web; you need never lose a PPT again
you can easily distribute a presentation without viewing software
it’s not PowerPoint and your audience will be amazed by your technical prowess.
you require web coding skills
positioning, effects and transitions are more limited
few systems offer slide notes (it’s a little awkward to show them separately)
it’s more difficult to print handouts
S5 — A Simple Standards-Based Slide Show System ( download )
CSSS — CSS-based SlideShow System ( download )
Slides ( download )
HTML5Rocks (no direct downloads, but you can copy the source)

What are the key features to look for in an HTML5 presentation system?

When choosing an HTML5 presentation system, consider features such as ease of use, customization options, and compatibility with various devices. The system should have an intuitive interface that allows you to create presentations without any coding knowledge. Customization options are important for personalizing your presentation to match your brand or style. Additionally, the system should be compatible with different devices, including desktops, laptops, tablets, and smartphones, to ensure your audience can view your presentation without any issues.

How does HTML5 improve the presentation experience compared to traditional methods?

HTML5 enhances the presentation experience by offering interactive and dynamic content. Unlike traditional methods, HTML5 allows for the integration of multimedia elements like videos, audio, and animations directly into the presentation. This makes the presentation more engaging and interactive for the audience. Additionally, HTML5 presentations are web-based, meaning they can be accessed from any device with an internet connection, providing convenience and flexibility for both the presenter and the audience.

Are HTML5 presentations compatible with all browsers?

HTML5 presentations are generally compatible with all modern web browsers, including Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge. However, there may be slight variations in how different browsers render HTML5 content. Therefore, it’s always a good idea to test your presentation on multiple browsers to ensure it displays correctly.

Can I use HTML5 presentation systems for professional purposes?

Yes, HTML5 presentation systems are suitable for a variety of professional purposes. They can be used for business presentations, educational lectures, product demonstrations, and more. The ability to incorporate multimedia elements and interactive features makes HTML5 presentations a powerful tool for conveying complex information in an engaging and understandable way.

How can I make my HTML5 presentation accessible to all users?

To make your HTML5 presentation accessible, ensure that all content is readable and navigable for users with different abilities. This includes providing alternative text for images, captions for videos, and using clear and simple language. Additionally, make sure your presentation is responsive, meaning it adjusts to fit different screen sizes and orientations.

Can I convert my existing PowerPoint presentations to HTML5?

Yes, many HTML5 presentation systems offer the ability to import and convert PowerPoint presentations. This allows you to leverage your existing content while benefiting from the enhanced features and capabilities of HTML5.

Do I need to know how to code to use HTML5 presentation systems?

While having some knowledge of HTML5 can be beneficial, many HTML5 presentation systems are designed to be user-friendly and do not require any coding skills. These systems often feature drag-and-drop interfaces and pre-designed templates to help you create professional-looking presentations with ease.

Can I share my HTML5 presentations online?

Yes, one of the major advantages of HTML5 presentations is that they can be easily shared online. You can publish your presentation on your website, share it via email, or even embed it in a blog post or social media update.

Are HTML5 presentations secure?

HTML5 presentations are as secure as any other web content. However, it’s important to follow best practices for web security, such as using secure hosting platforms and regularly updating your software to protect against potential vulnerabilities.

Can I track the performance of my HTML5 presentations?

Yes, many HTML5 presentation systems include analytics features that allow you to track viewer engagement and behavior. This can provide valuable insights into how your audience interacts with your presentation, helping you to improve and refine your content over time.

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler .

100+ CSS Animations

Welcome to our collection of CSS animations! In this curated collection, we have gathered a variety of free HTML and CSS animation code examples from reputable sources such as CodePen, GitHub , and other valuable resources.

With our February 2024 update , we are excited to present 14 new items that showcase the latest trends and techniques in web design.

Whether you are a web developer seeking inspiration or a designer looking for ready-to-use animation snippets, this collection has something for everyone. Explore the power of CSS animations and enhance your website with captivating visual effects.

Let's dive in and discover the possibilities together!

CSS Animation Libraries

Single Keyframe Tricks

Each button is associated with a unique animation effect, such as "shake", "pulse", "glitch", "flip", "fill", "sheen", "glow", "blur", and "tonyhawk". These effects are achieved using CSS animations and keyframes, which define the sequence of changes in the animation. Interactive buttons significantly enhance user engagement, offering not just navigational utility but also enriching the visual appeal of webpages. Dependencies: props.easing.css.

demo and code

Pure CSS Infinite Scroll Animation

The animation allows for infinite scrolling in both directions, providing a seamless user experience. The duration of the scrolling animation can be customized using the --duration CSS variable. Dependencies: none.

The code uses CSS animations for smooth element movements. Keyframes define styles at different animation stages. The position and transform properties set element positions and apply 3D transformations. The mix-blend-mode controls color blending, adding complexity. Pseudo-elements ::before and ::after create additional elements. Gradient backgrounds create smooth color transitions. Radial and linear gradients contribute to the aesthetic. The skew property tilts elements, adding dynamism. Relative units like vmin ensure adaptive sizing. Responsive . Dependencies: none.

Washing Machine Animation in Pure CSS

The HTML code provides the basic structure for the washing machine, including the machine itself, its buttons, and the clothes inside it. Each element is given a specific class name, which is then targeted in the CSS for styling. The use of border-radius property transforms square div blocks into circular shapes to mimic parts like the door and control knobs of the machine. Gradients and shadows are applied for a realistic touch. Keyframes are defined to create a spinning effect for the clothes inside the machine, mimicking an actual wash cycle. The code uses responsive design techniques to ensure that the washing machine animation looks good on screens of all sizes. Responsive . Dependencies: none.

Optimus Prime Toggle with CSS Transform

One notable feature is the extensive use of CSS custom properties, denoted by var(--variable-name) . Custom properties allow developers to define reusable values, enhancing maintainability and flexibility in styling. The code utilizes 3D transformations to give a sense of depth and perspective to the Optimus Prime character. The translate3d function is particularly used to adjust elements along the X, Y, and Z axes. The clip-path property is employed to create non-rectangular shapes. The :root:has() pseudo-class is used conditionally to apply styles based on the presence of the #transform:checked selector. This implies that the styling is influenced by the state of a checkbox with the id transform . Responsive . Dependencies: none.

Become the Cup

The provided code snippet is a fascinating example of how HTML and CSS can be used to create dynamic and visually appealing web content. The HTML part of the code primarily consists of div elements, which are used to create a visual scene. These div elements are nested and classed to represent different components of the scene, such as a pond, fish, ripples, and a quote. The CSS part of the code is used to style these HTML elements. The animation property is used extensively throughout the code to create dynamic effects, such as the movement of the fish and the ripples in the pond. The @keyframes rule is used to specify the behavior of these animations. The code also makes use of CSS filters to create interesting visual effects. For example, the blur filter is used to create a blur effect on the pond’s surface, and the drop-shadow filter is used to create a shadow effect for the quote. The code includes SVG elements with filters. These are used to create more complex visual effects, such as turbulence and displacement in the pond’s water. Responsive . Dependencies: none.

A Dynamic Star Pattern with HTML and CSS

The HTML structure of the code is composed of a series of nested div elements, organized into sets within a scene. Each set contains 12 div elements, and there are multiple sets within the scene. The scene itself is divided into two parts: a 2D part and a 3D part, each containing multiple sets of div elements. The CSS code defines the styles and animations for these div elements. Each div is styled to be circular with a white background and a box shadow that changes color based on the --step variable. The wave animation for the 2D scene changes the vertical position of the div s, creating a wave-like effect. The sway animation for the 3D scene changes the depth position of the divs, creating a swaying effect. Responsive . Dependencies: none.

An Interactive Beer Glass

The HTML structure consists of a div element with the class glass , which contains SVG paths that define the shape of the glass. Inside the glass div, there are other divs for the wrapper , contents , beer , bubbles , and head of the beer. These elements are used to create the visual representation of the beer glass and its contents. The beer glass is interactive. When you click and hold on the glass (or tap and hold on touch devices), the animations play, giving the effect of the glass filling up with beer. This is achieved using the :active and :hover pseudo-classes to change the animation-play-state property from paused to running . Responsive . Dependencies: none.

Gradient Animation with CSS's @property

The HTML structure is quite simple. It consists of a parent div with the class container , which contains three child div elements, each with the class circle . The CSS code is more complex and uses several advanced features. The :root rule defines four color variables ( --c1 to --c4 ). These are used later in the conic-gradient function. The @property rule is part of the CSS Houdini Paint API. It defines a custom property --progress that can be animated. The @keyframes rule defines an animation named progress that animates the --progress property from 0 to 100%. This animation is applied to the .circle elements with an infinite loop. Responsive . Dependencies: none.

CSS Animation Effects

The body contains a div with the class container , which in turn contains two more div elements with the class box . These box elements have inline CSS styles that use CSS variables ( --i:1 and --i:2 ). The body is set to be a flex container, centered both vertically and horizontally, with a black background. The .container class also uses flexbox for centering, and applies a reflection effect using -webkit-box-reflect . The .box class applies a linear gradient background, a rotation transform, and an animation. The animation moves the background position from 0 to 40px, creating a moving gradient effect. Responsive . Dependencies: none.

Flux Capacitor (1.21 GIGAWATTS!): A CSS Animation

The HTML structure consists of a main container with the class case . Inside the case, there are three main sections: top, center, and bottom. Each section contains various elements such as labels, lights, circles, bolts, bridges, and plugs, creating a visually appealing representation of a device. The animation is achieved using SVG elements with wave-like patterns and various CSS properties for positioning and styling. Responsive . Dependencies: none.

Pulsating Heart: A CSS Animation

The HTML structure is straightforward. It consists of a parent div with the class heart , which contains two child div elements, heartbeat and heartecho . Both children display the heart emoji (❤️), creating the illusion of a heart and its echo. The heart elements are animated using keyframes, which define the animation's behavior at various stages. The heartbeat animation alters the scale of the heart, making it appear to beat. The heartecho animation creates an echo effect by scaling the heart from its original size to three times larger while gradually reducing its opacity. Dependencies: none.

Mesmerizing Tube Animation with CSS

The HTML structure is simple, consisting of nested div elements representing tubes, each containing a series of strips. The structure is minimalistic, emphasizing the power of CSS in this animation. The tubes exhibit a fascinating 3D rotation effect using the rotateY property within the @keyframes rule. Each tube is individually animated with a delay, creating a cascading and immersive visual experience. The strips within each tube are dynamically positioned and rotated to achieve the illusion of a continuously moving background. The rotateY and translateZ properties are used in conjunction to create this mesmerizing effect. The @keyframes rule defines the speen animation, which rotates the tubes along the Y-axis, creating a spinning effect. The animation is set to be infinite and linear, ensuring a seamless and continuous rotation. Responsive . Dependencies: none.

The HTML code creates a structure for a character with various parts such as leaves, arms, body, face, eyes, freckles, mouth, legs, and Each part is represented by an HTML element, and these elements are organized in a hierarchical structure that reflects the physical structure of the character. The CSS code defines the visual appearance and animations for the character. It includes styles for different parts of the character, such as colors, sizes, and shapes. The CSS also includes keyframes for animations that are triggered when a user hovers over the character. These animations cause the character to move in various ways, creating a sense of interactivity and dynamism. Dependencies: none.

October 14, 2022

About a code

Old film effect - pure css animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

October 13, 2022

Nosferatu - Pure CSS Animation

September 13, 2022

Animation Delay

Chris Heuberger
May 27, 2022
HTML / CSS (SCSS)

CSS Sprite Stop Motion Animation

Responsive: no

Md Usman Ansari
February 14, 2022

Pure CSS Blooming Flowers with Falling Leaves

Temani Afif
October 7, 2021

One DIV Growing Flower

Ivan Bogachev
September 28, 2021
HTML / CSS (Less)

Circles and Lines

Pure css animation kaleidoscope.

July 6, 2021
Fernando Cohen
June 17, 2021

Dashboard Ilustration Animated Only with CSS

June 1, 2021
HTML (Pug) / CSS (SCSS)

Pure CSS Magic Gateways with Houdini

Compatible browsers: Chrome, Edge, Opera, Safari

CSS Tutorial

Css advanced, css responsive, css examples, css references, css animations.

CSS allows animation of HTML elements without using JavaScript!

In this chapter you will learn about the following properties:

animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode

Browser Support for Animations

The numbers in the table specify the first browser version that fully supports the property.

What are CSS Animations?

An animation lets an element gradually change from one style to another.

You can change as many CSS properties you want, as many times as you want.

To use CSS animation, you must first specify some keyframes for the animation.

Keyframes hold what styles the element will have at certain times.

The @keyframes Rule

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.

To get an animation to work, you must bind the animation to an element.

The following example binds the "example" animation to the <div> element. The animation will last for 4 seconds, and it will gradually change the background-color of the <div> element from "red" to "yellow":

Note: The animation-duration property defines how long an animation should take to complete. If the animation-duration property is not specified, no animation will occur, because the default value is 0s (0 seconds).

In the example above we have specified when the style will change by using the keywords "from" and "to" (which represents 0% (start) and 100% (complete)).

It is also possible to use percent. By using percent, you can add as many style changes as you like.

The following example will change the background-color of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:

The following example will change both the background-color and the position of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:

Delay an Animation

The animation-delay property specifies a delay for the start of an animation.

The following example has a 2 seconds delay before starting the animation:

Negative values are also allowed. If using negative values, the animation will start as if it had already been playing for N seconds.

In the following example, the animation will start as if it had already been playing for 2 seconds:

Set How Many Times an Animation Should Run

The animation-iteration-count property specifies the number of times an animation should run.

The following example will run the animation 3 times before it stops:

The following example uses the value "infinite" to make the animation continue for ever:

Run Animation in Reverse Direction or Alternate Cycles

The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles.

The animation-direction property can have the following values:

normal - The animation is played as normal (forwards). This is default
reverse - The animation is played in reverse direction (backwards)
alternate - The animation is played forwards first, then backwards
alternate-reverse - The animation is played backwards first, then forwards

The following example will run the animation in reverse direction (backwards):

The following example uses the value "alternate" to make the animation run forwards first, then backwards:

The following example uses the value "alternate-reverse" to make the animation run backwards first, then forwards:

Specify the Speed Curve of the Animation

The animation-timing-function property specifies the speed curve of the animation.

The animation-timing-function property can have the following values:

ease - Specifies an animation with a slow start, then fast, then end slowly (this is default)
linear - Specifies an animation with the same speed from start to end
ease-in - Specifies an animation with a slow start
ease-out - Specifies an animation with a slow end
ease-in-out - Specifies an animation with a slow start and end
cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function

The following example shows some of the different speed curves that can be used:

Specify the fill-mode For an Animation

CSS animations do not affect an element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior.

The animation-fill-mode property specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both).

The animation-fill-mode property can have the following values:

none - Default value. Animation will not apply any styles to the element before or after it is executing
forwards - The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
backwards - The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
both - The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions

The following example lets the <div> element retain the style values from the last keyframe when the animation ends:

The following example lets the <div> element get the style values set by the first keyframe before the animation starts (during the animation-delay period):

The following example lets the <div> element get the style values set by the first keyframe before the animation starts, and retain the style values from the last keyframe when the animation ends:

Animation Shorthand Property

The example below uses six of the animation properties:

The same animation effect as above can be achieved by using the shorthand animation property:

Test Yourself With Exercises

Add a 2 second animation for the <div> element, which changes the color from red to blue. Call the animation "example".

Start the Exercise

CSS Animation Properties

The following table lists the @keyframes rule and all the CSS animation properties:

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Make interactive presentations

Create show-stopping presentations and clickable slide decks with Genially’s free online presentation builder. Leave boring behind and tell a story that’s interactive, animated, and beautifully engaging.

INTERACTIVE CONTENT

A presentation that works like a website

Engage your audience with interactive slides that they can click on and explore. Add music, video, hotspots, popup windows, quiz games and interactive data visualizations in a couple of clicks. No coding required!

NO-CODE ANIMATION

Make your slides pop with animation

Bring a touch of movie magic to the screen with incredible visual effects and animated page transitions. Add click-trigger and timed animations to make any topic easy to understand and captivating to watch.

Image of the Genially tool showing the insertion of multimedia elements from Spotify, Google Maps and Youtube

INTEGRATIONS

Live from the world wide web

Embed online content directly in your slides for a media-rich interactive experience. From YouTube and Spotify to Google Maps and Sheets, Genially works seamlessly with over 100 popular apps and websites.

Image of the Genially tool showing free libraries of backgrounds, color palettes, vector graphics, images, charts, graphs, maps and smartblocks.

TEMPLATES & TOOLKIT

Genius design tools

With Genially, anyone can create a polished and professional presentation. Choose from over 2000 pre-built templates, or create your own design using the drag-and-drop resources, color palettes, icons, maps and vector graphics.

Image of a Genially interactive presentation

ONLINE PLATFORM

Safe and sound in the cloud

Because Genially is online, you can relax knowing that your slides are always up-to-date. There’s no risk of forgetting to save changes or accessing the wrong file. Log in from anywhere, collaborate with your team, and make edits in real time.

All-in-one interactive presentation maker

Real-time collaboration

Co-edit slide decks with others in real time and organize all of your team projects in shared spaces.

Multi format

Present live, share the link, or download as an interactive PDF, MP4 video, JPG, HTML, or SCORM package.

Engagement Analytics

See how many people have viewed and clicked on your slides and keep tabs on learner progress with User Tracking.

Import from PPTX

Give your old decks a new lease of life by importing PowerPoint slides and transforming them with a little Genially magic.

Keep content on-brand with your logo, fonts, colors, brand assets, and team templates at your fingertips.

Quiz & Survey Builder

Use the Interactive Questions feature to add a fun quiz to your slides or gather feedback from your audience.

Beautiful templates

Make your next deck in a flash with Genially’s ready-to-use slides.

Okr shapes presentation

School notebook presentation

Animated sketch presentation

Minimal presentation

Land of magic presentation

Onboarding presentation

Visual presentation

Animated chalkboard presentation

Online Education Guide

Terrazzo presentation

Startup pitch

Historical presentation

THEMES FOR EVERYONE

Interactive presentation ideas

From classroom materials to business pitches, make an impact every day with Genially.

A photograph with 7 children of different nationalities in a school classroom with a laptop making a presentation

Education presentations

Photograph of 3 people gathered together talking about a report with a tablet

Pitch decks

Photograph of 4 people in an office using a laptop to make a company presentation

Business presentations

Photo of 1 girl with a mac computer doing a slideshow

Thesis defense

Why the world loves Genially presentations

Reviews from people rating the tool genially

Share anywhere

Present live

From the front of the room or behind a screen, you’ll wow your audience with Genially. Heading off grid? Download in HTML to present dynamic slides without WiFi.

Share the link

Every Genially slide deck has its own unique url, just like a website! Share the link so that others can explore at their own pace, or download an MP4 video slideshow or PDF.

Post online

Embed the slides on your website or post them on social media. Upload to Microsoft Teams, Google Classroom, Moodle or any other platform.

Composition of an eye surrounded by image icons to illustrate the Genially method; interactive visual communication

The benefits of interactive slides

🗣️ Active participation An interactive slide deck gives your audience cool things to click on and discover, boosting learning and engagement.

👂 Multi-sensory experience Audio, video, animations, and mouse interactions make your content immersive, entertaining and accessible.

🧑‍🤝‍🧑 People-friendly format Pop-ups and embeds condense more material into fewer slides so you can break information down into digestible chunks. 

🎮 Gamification Games, quizzes and puzzles make information more memorable and enable you to gather feedback and check understanding.

How to make an interactive presentation

With Genially’s easy-to-use presentation platform, anyone can make incredible visual content in moments.

Choose a template or a blank canvas

Create content starting from a Genially template

Get stunning results in less time with a ready-made template. Feeling creative? Design your own slides from scratch.

Customize the design

Add animations and interactions

Resources to become a pro presentation creator

Image showing the interactivity of the Genially tool

VIDEO TUTORIAL

How to create an interactive presentation: Get started in Genially.

Image showing a presentation about the Genially tool

EXPERT TIPS

How to present data without sending your audience to sleep.

Image showing how the Genially tool is no-code

MICRO COURSE

No-code animation: Bring your slides to life with cinematic visual effects.

Neon image talking about storytelling in Genially

PRESENTATION IDEAS

The art of digital storytelling: Engage and thrill on screen.

Genially in a nutshell

How do I make a presentation interactive and how does Genially work? Find the answers to all of your slide-related questions here!

What’s an interactive presentation?

Interactive slides contain clickable hotspots, links, buttons, and animations that are activated at the touch of a button. Instead of reading or watching passively, your audience can actively interact with the content.

Genially’s interaction presentation software allows you to combine text, photos, video clips, audio and other content in one deck. It’s a great way to condense more information into fewer slides.

If you’re a teacher, you can share multiple materials in one single learning resource. Students can create their own projects using digital media and online maps. For business or training, try embedding spreadsheet data, PDFs, and online content directly in your slides.

An interactive slide deck is more user-friendly than a Microsoft PowerPoint presentation or Google Slides document. That’s because you can break information down into chunks with pop-ups, labels, voiceovers and annotated infographics.

The other benefit of interactive content is increased engagement. It’s easier to keep your audience’s attention when they’re actively participating. Try Genially’s presentation software and free slideshow maker to see how it’s better than other presentation websites. You won’t go back to standard presentation apps!

How do you make a clickable slide?

The best way to make slides clickable is to use Genially’s free interactive presentation program. Design your slide then apply an interaction. In a couple of clicks, you can add popup windows, hyperlinks, close-up images, games, animations, multimedia and other content.

Choose from the library of hotspot buttons and icons to show people what to click on. Go to Presenter View to get a preview and see how your content will appear to your audience.

How do I create presentations that look professional?

You’ve got a deadline looming and you’re staring at the screen with a blank presentation. We’ve all been there! Starting a presentation design from scratch is tricky, especially if you’re short on time.

Genially’s free online presentation maker has over 2000 ready-to-use templates for professional slide presentations, photos slideshows, and more. Each slide design has been created by our team of top graphic designers. No need to worry about fonts, centering images, or designing a matching color scheme. It’s all done for you.

Start by browsing our layouts and themes for education, business and then customize with your own text and images.

How do I share or download my slides?

Because Genially is a cloud based presentation software, you can simply share the link to your slides. Like other online presentation tools, there are no files to download or store on your computer. Everything is saved online.

When you publish your slide deck, it gets its own unique url, just like a website. Share the link with others to let them explore the content in their own time. If you’re presenting live, just click the Present button.

You can also embed your presentation on your website, company wiki, or social media. Genially is compatible with WordPress, Moodle, Google Classroom, and other platforms. If you use an LMS, you can also download your interactive design slides in SCORM format.

For slideshow videos and slideshows with music, share online or download as an MP4 video. Check out our free slideshow templates for ideas.

Can I make a free presentation in Genially?

You bet! Genially is an easy-to-use slide maker, with a free version and paid plans. The free plan allows you to create unlimited slides with interactions and animations. Subscribe to one of our paid plans for more advanced features.

Discover a world of interactive content

Join the 25 million people designing incredible interactive experiences with Genially.

Case Studies
Contact Us
FAQ
Help Document
Knowledge Base
Help Document
Knowledge Base

Amazing Tools for a Killer HTML5 Business Presentation

Create presentations & animated videos, make awesome visual experience for your audience.

For Windows10/8/7Vista/XP

Know About Employee Engagement

Tips for Awesome Presentation

Conference Survival Guide

10 Best Practices of A Company

iPhone 6S Presentation

10 Ideas for Appeciating Employee

Ice Story Presentation

iPhone 6S Video Presentation

iPad Video Presentation

Gogorun Video Presentation

Apple Watch Video Presentation

Warcraft Video Presentation

Professional results in just 5 minutes

Infinite canvas & unlimited zoom and pan effect

Smooth animation and transition effects

Tons of built-in templates and character library

Give record and caption to present better

Easy-to-use interaction designer

Variety of formats (e.g: MP4, Exe) can be exported

Tons of Advanced Features

How to use the Focusky

Watch the video to explore the advantages of Focusky Presentation Maker

Focusky Main Features

The best tool to create HTML5 presentations and animated videos

Easy & Intuitive

The user-friendly interface lets you create, publish and present your animated video presentation easily. Utilize pre-designed templates to get start quickly even if you are not a professional designer. Simply drag and drop the materials on canvas and then create an eye-catching video presentation effortlessly.

Amazing Transition

Take good use of transition effect to present the video presentation smoothly. Slide, rotate, zoom and pan effects make the business presentation present like an animated movie. Besides, transition effect can enhance your video presentation effectively make the presentation stand out definitely.

Animation Editor

Adding animation effects to objects can make them present on screen in the lively way. There are tons of dynamic animation effects available to display the multimedia contents in your own way. Take full advantage of entrance, exit, emphasis and action path animation effect to convey your idea better.

Path of Discovery (3D Camera)

Rather than traditional slide to slide presentation, the multimedia presentation can engage and inspire the audiences better. It can help you present your ideas in mind mapping style. And the 3D camera of Focusky can create more stunning 3D animation effect exactly to make the HTML5 presentation oustanding.

Built-in WordArt

You can use WordArt to add special text effect to multimedia presentation to beautify content design. You can convert existing text to WordArt or create your own decorative effect text by customizing the font, text color and size. Moreover, WordArt text and texture are effective way to highlight elements.

Video Backgrounds

Focusky provides tons of pre-designed and professional video background to beautify your presentation. Video background is a good way to draw audiences’ attention. Simply apply the built-in video background or your own one to wow audiences and make them have remarkable visual presentation experiences.

Rich Media Presentations

There are various multimedia contents available for enriching your HTML5 business presentation. You can add local video, audio, image, photo slideshow, shapes, hyperlink, text, animated characters and flash animation to animated presentation for delivering information in a visual and engaging way.

Built-in Dynamic Characters

Utilize the built-in animated characters to bring your video presentation to life. Take full advantage of animated characters to enhance the presentation and deliver the message easily. Besides, give a voice to the characters to make the presentation lively and help capture your audiences’ attention in seconds.

Integrated with Whiteboard Animation

Anyone can create a whiteboard animation video with Focusky even if you never make one before. Easily add the multimedia contents to create you own whiteboard-style animated video in minutes. Utilize the whiteboard animation video presentation to convey complex information easily.

Charts and Graphs

There are so many different types of charts and graphs in Focusky. Use a chart or graphs to make a comparison, show a relationship or highlight a trend easily. Just simple click to choose a chart or graph to present the data appropriately and helps audiences understand what you are talking about.

Recording Narration

Add recording or tracks to video presentation to make it become voiceover narration and persuasive. Recording narration helps explain complex information and make audiences’ understand what you are talking about easily. Anyway, ensure that you have a good microphone and script ready before you start recording.

Social and Sharing

Sharing the HTML5 presentation to social network is good for connecting with audiences. Each presentation that you publish online will have a unique URL. You can share it to individuals, social network and email to others. Additionally, you are able to embed the online presentation on your website or blog by lines of simple codes.

Integrate with Interaction Designer

There is powerful interaction function available for adding interaction elements effortlessly to animated presentation. Simply make your multimedia presentation interactive to get audiences stay focused and participate in your wonderful presentation efficiently.

5000+ Online Royalty-free Vector Resources

Focusky collects and sorts more than 5000 vector diagrams and icons in SVG format for you to create gorgeous HTML5 presentation easier. Add SVG images instead of boring text to animation presentation to express your points in a clearer way.

Unlimited Hosting Cloud Platform

Focusky is cloud-based platform which provide free and safe cloud hosting service to publishing business presentation online. Then your online business presentation can be accessed from anywhere and anytime.

Cross Platforms

You can export your animated presentation as APP & HTML & MP4 video presentation with ease. And then the animated presentation can be present in various platforms such as PC, tablet and mobile devices smoothly. In other words, your audiences can view your presentation on different platform without installing Focusky client.

User Examples Created by Focusky

Focusky is the best PowerPoint alternative for marking stunning html5 presentations!

HTML5 Version Demo
FLASH Version Demo

How to Reduce Air Pollution

5 Step to Your New Eo-friendly Office

Bookings Booster Seminar

Maker Venture

Apple Watch

How to Manage Your Time

Focusky News & Reviews

From PCWorld, 12/14/2014

"Focusky.com is one of the new generation of presentation apps that overturns almost every idea you have about presentations. Focusky uses Adobe's Flash and HTML5 technology to create animated presentations with a few clicks and drags. Instead of creating a series of separate slides, Make awesome ..."

From Cnet, 11/18/2014

"Focusky tries to change this by turning your presentation into a wide-open canvas on which you can draw your ideas spatially, and then present them by zooming and panning all over the canvas. Importanly, the output presentation feels cinematic and engaging in a way traditional presentations rarely are..."

@Jim M. Verns from Facebook

"Focusky is the most unique PowerPoint alternative we reviewed. We definitely appreciate the user interface and the interesting presentation style it follows. Powerful features, like interesting 3D Camera ,like transitions and object animations, are user-friendly in this presentation software! These give a new alternative to ..."

@Jackel M. Topi from Twitter

"Focusky seems to be a great option for those teachers who use concept mapping or digital story telling in the classes. It would be a good teaching tool for those visual learners who struggle to grasp the “big picture” of a topic, or how it relates to specific points you are instructing them on. Instructional designers ..."

Our customers love us as much as we love them.

We have the friends to prove it..

I have been playing around Focusky, the wonderful Prezi alternative tool. It is a cool thing that lets you create presentations that are visually different from PowerPoint. I love the characters, SVG images library and the powerful interaction feature. All of them make my presentation awesome!!

Elizabeth Terry

E-Marketing Manager

Personally I am a big fan of Focusky. It is easy to use and transform existing PPT slides into stunning visuals. And it doesn’t take much time. And the templates look nice, really excellent alternative to Prezi.

Lloyd Engle

I love using Focusky for my own lessons and as an alternative to PowerPoint. It beats the ancient PowerPoint and my student loved. It helps me get my student stay focused and participate in my presentation. That’s awesome!

e-Learning T rainer

We value your privacy and protect your financial and personal data with full encryption and advanced fraud protection.

Our software is free of any forms of malware or virus. It is safe to install and run.

SUPPORT SERVICE

Knowledgeable representatives available to assist you through email within 1 business day.

Try Focusky free and enjoy a brand new experience of presentation

an image, when javascript is unavailable

site categories

Cannes film festival usher clashes with dominican star massiel taveras days after kelly rowland confrontation, michel hazanavicius defends holocaust animated film ‘the most precious of cargoes’ at cannes.

By Anthony D'Alessandro

Anthony D'Alessandro

Editorial Director/Box Office Editor

'The Kingdom' Review: Julien Colonna's Corsican Father-Daughter Mob Drama Is An Understated Epic - Cannes Film Festival

'Anora' Palme D'Or Winner Sean Baker On The Plight Of Theatrical: "Discouraging" But Sees "A Rising Film Culture" - Cannes

Some critics have taken umbrage with the Cannes Competition title and its approach to its portrayal of horrifying scenes. The Screen Daily review wrote, “The worst decision comes in a late sequence showing still, stylized black and white images of the faces of the Auschwitz dead: hellish visions that are crassly coercive in their attempt to elicit stunned horror. There is a difference between the graphic representation of such images in documentary and their decorative amplification here — in sharp contrast with those films, notably last year’s Competition standout The Zone of Interest , they have reminded us of the artistic power, and the ethical decency of not showing.”

“Movies that rise to huge polemics — it shows how you burn your fingers with this subject,” said Hazanavicius.

“It’s impossible to show what really happens — if you don’t show what really happened, there’s a big risk you end up telling a lie,” he responded to a reporter’s query on animating the Holocaust.

Hazanavicius said he felt that animation lent itself to portraying a hard subject versus a live-version: “You don’t have to ask people to pretend that they are departees, that they are going to die.”

“We felt this (animation) was a suitable way not to resolve, but with dignity to deal with the problems of representation.”

Hazanavicius said his north star in making the movie was Grumberg’s material, who he worked closely with in bringing to the screen. “I drank his words, he was a fantastic guide and a real authority in these matters.”

The movie received a ten-minute standing ovation at its premiere last night.

Must Read Stories

George lucas feted; neon five in a row; analysis; gerwig; more.

Sean Baker’s ‘Anora’ Scoops Top Award; Prizes For ‘Emilia Perez’ & More

‘furiosa’ up in smoke with $31m, ‘garfield’ could upset, how worried should hollywood be, loan out corporations could end, iatse tells members.

Subscribe to Deadline Breaking News Alerts and keep your inbox happy.

Pixar Lays Off 175 Workers as It Returns Its Focus to Films

The animation studio, which has struggled over the past few years, will stop making original shows for Disney+.

Mike and Sully, two characters from “Monsters, Inc.,” standing on a float in a parade.

By Brooks Barnes

Reporting from Los Angeles

Pixar will stop making original shows for Disney+ as part of a broader retrenchment, resulting in layoffs that will reduce its work force by 14 percent.

Jim Morris, the president of Pixar, announced the layoffs in an internal memo on Tuesday that was viewed by The New York Times. He cited “the return to our focus on feature films.” About 175 employees will be let go.

Questions about Pixar’s health have swirled in Hollywood and among investors since June 2022, when the Disney-owned studio released “ Lightyear ” to disastrous results. How could Pixar, the gold standard of animation studios for nearly three decades, have gotten a movie so wrong — especially one about Buzz Lightyear, a bedrock “Toy Story” character?

Pixar’s next film, “Elemental,” an opposites-attract love story, arrived to alarmingly low ticket sales in June 2023, but ultimately generated a solid $500 million at the box office.

One problem: Disney had weakened the Pixar brand by using its films to build the Disney+ streaming service. Starting in late 2020, when many multiplexes were still closed because of the coronavirus pandemic, Disney debuted three Pixar films in a row (“Soul,” “ Turning Red ” and “Luca”) online, bypassing theaters altogether.

The layoffs on Tuesday, which were reported earlier by The Hollywood Reporter, acknowledged another reality: Pixar, like other Disney-owned studios, including Marvel, lost its focus when it was pushed to create original programming for Disney+. At the time — around December 2020 — Disney was pouring money into the streaming service in a wild and ultimately unsuccessful effort to attract up to 260 million subscribers worldwide. It had 87 million at the time. It has about 154 million today.

Robert A. Iger, the chief executive of Disney, has since reversed course, emphasizing cost containment and quality — less can be more, if the standards are high. He has said repeatedly over the past year that the creative teams at Disney were stretched too thin by the streaming strategy.

As part of the retrenchment at Pixar, “ Elio ,” a movie about an 11-year-old boy who is inadvertently beamed into space, was delayed. It was supposed to arrive this March. Disney pushed it to June 2025. (Pixar’s next film in theaters will be “Inside Out 2.” It is scheduled for release on June 14.)

Pixar’s original series for Disney+ included “Cars on the Road,” focused on the “Cars” characters Lightning McQueen and Mater, and “Dug Days,” a series of shorts about the dog from the movie “Up.” The studio’s last original Disney+ series, “Win or Lose,” about a coed middle school softball team, will arrive late this year.

Pixar will continue to make the occasional short film for Disney+.

Brooks Barnes covers all things Hollywood. He joined The New York Times in 2007 and previously worked at The Wall Street Journal. More about Brooks Barnes

Japanese Animation Powerhouse Studio Ghibli Makes History With Honorary Palme d’Or at Cannes

By Karen Idelson

Karen Idelson

Cannes’ Animation Day Opens Doors for Artists Looking for Funding, Distribution, Sales Agents and Networking Opportunities 1 week ago
Variety’s 2024 Entertainment Marketing Summit to Examine Industry Trends, Successful Campaigns Like ‘Oppenheimer’ 1 month ago
Directors for ‘Elemental,’ ‘Spider-Man’ and More Oscar Noms on Why Serious Themes Shine in Animation 3 months ago

When Studio Ghibli receives its honorary Palme d’Or May 19 at the Cannes Film Festival , the creative home to Hayao Miyazaki — arguably the most admired and influential living animation director — will make history.

This marks the first time an honorary Palme d’Or has been given to a group, which sits well with the helmer. Miyazaki’s longtime collaborator, producer and co-founder of the studio, Toshio Suzuki, believes the animators is not comfortable with being singled out for the honors surrounding his filmmaking.

Popular on Variety

Though Miyazaki once announced his retirement, Suzuki doesn’t believe the helmer will ever be able to completely walk away from the art he loves so much. He’s not sure when the next film will begin since Miyazaki puts so much into his work.

“He sort of tortures himself when he makes a movie,” said Suzuki. “He works very hard and thinks a long time about the kind of movie he wants to make. He will never say the word retire again. But I think it will be some time before he starts again. He needs to rest from making ‘The Boy and the Heron’ because it’s a very long process that takes many years.”

More From Our Brands

‘liar’ ‘panderer’ libertarians relentlessly boo and heckle trump, dodgers star shohei ohtani scores a socal estate for $7.8 million, newgarden repeats as indy 500 winner; castroneves finishes 20th, the best loofahs and body scrubbers, according to dermatologists, johnny wactor, general hospital actor, dead at 37, verify it's you, please log in.

COMMENTS

The HTML presentation framework
Create Stunning Presentations on the Web. reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free. Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your ...
WebSlides: Create Beautiful HTML Presentations
WebSlides is the easiest way to make HTML presentations. Just choose a demo and customize it in minutes. 120+ slides ready to use. ... WebSlides is about good karma. This is about telling the story, and sharing it in a beautiful way. HTML and CSS as narrative elements. Work better, faster. ... CSS animations: Animate.css. Longforms: Animate on ...
How to Create Beautiful HTML & CSS Presentations with WebSlides
Getting Started with WebSlides. To get started, first download WebSlides. Then, in the root folder, create a new folder and call it presentation. Inside the newly created presentation folder ...
How To Create a Slideshow
Do you want to create a stunning slideshow for your web page? Learn how to use JavaScript and HTML to display a series of images in a dynamic and responsive way. Follow the step-by-step tutorial from W3Schools, the world's largest web developer site.
How To Build A Captivating Presentation Using HTML, CSS, & JavaScript
Making a Presentation. Copy an existing presentation folder; Change the folder name (which should be located at public/slides) with the name day[num of day] ex(day2) Making a Slide. Making a slide is pretty simple. Just add a HTML section. <section>  </section> inside the span with the class of "prez-root". Also keep in mind ...
Web animations with HTML, CSS, and JavaScript
CSS allows us to animate HTML elements without making use of JavaScript. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold the styles that the element will have at certain times. For proper understanding, I will be explaining the basic properties we will be using.
Demo
Speaker View. There's a speaker view. It includes a timer, preview of the upcoming slide as well as your speaker notes. Press the S key to try it out. Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
How to Create Presentation Slides With HTML and CSS
All these features will be enabled with JavaScript. Inside js/index.js, we'll begin by storing references to the presentation wrapper, the slides, and the active slide: 1. let slidesParentDiv = document.querySelector('.slides'); 2. let slides = document.querySelectorAll('.slide'); 3.
WebSlides Demos
Beautiful HTML presentations and websites made with WebSlides. Good karma. WebSlides. WebSlides @WebSlides; WebSlides Demos. All of these presentations are free and responsive. 40+ components with a solid CSS architecture. Share your slides using #WebSlides. Why WebSlides? Jan 08, 2017; Landings Jan 07, 2017; Portfolios Jan 06, 2017;
W3.CSS Slideshow
The showDiv () function hides ( display="none") all elements with the class name "mySlides", and displays ( display="block") the element with the given slideIndex. If the slideIndex is higher than the number of elements (x.length), the slideIndex is set to zero. If the slideIndex is less than 1 it is set to number of elements (x.length).
35+ CSS Slideshows
The list also includes simple css slideshows, responsive, animated, and horizontal. 1. Slideshow Vanilla JS W/ CSS Transition. Custom slideshow with staggered transitions. Built in vanilla JS. Author: Riley Adair (RileyAdair) Links: Source Code / Demo. Created on: January 1, 2018. Made with: HTML, CSS, Babel.
Presentation Slides with HTML, CSS and JS
About HTML Preprocessors. HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. ... // get elements let presentation = document.querySelector(".presentation"); let slides = document.querySelectorAll(".slide ...
75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)
75+ Mind-Blowing CSS Animation Examples (Free Code + Demos) Enjoy this 100% free and open source collection HTML and CSS animation code examples. These CSS animations will impress your visitors! 1. CSS Animations With SVGs. Author: Joyanna (joyanna) Links: Source Code / Demo. Created on: May 8, 2020.
Create HTML5 animations with WebAnimator
WebAnimator is an offline software to create HTML5 animations and interactive web content. Easy and intuitive, it allows anyone to free their creativity and create interactive presentations, banners, animated backgrounds and texts to make web pages more beautiful and engaging.
5 of the Best Free HTML5 Presentation Systems
Google Slides Template. As you'd expect, Google has their own HTML5 presentation template (as well as the one offered in Google Docs ). It's fairly basic when compared to Reveal.js or Impress ...
100+ CSS Animations
Welcome to our collection of CSS animations! In this curated collection, we have gathered a variety of free HTML and CSS animation code examples from reputable sources such as CodePen, GitHub, and other valuable resources.. With our February 2024 update, we are excited to present 14 new items that showcase the latest trends and techniques in web design.
How To Embed Web Animations in PowerPoint Presentations
If you're using PowerPoint 365, the process involves installing a nifty Add-in called Web Viewer. Here's how you can do it: Head to the Home tab. Navigate to the Add-Ins section. Click the "Get Add-ins" button. In the search box, type "Web Viewer" and hit "Add" to install. To remove an Add-in later, go to "My Add-ins," click ...
Episode 31: Powerpoint animations done in CSS
If you haven't, powerpoint is a program that makes presentations or slideshows. There's a feature called "word animations" where we can animate how our text can enter the page. This is ...
CSS Animations
An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times as you want. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.
Introduction to HTML Tutorial. Free PPT & Google Slides Template
Unleash the power of web design in your classroom with our Geometric Abstract PPT template, ideal for teachers introducing HTML. Dominated by a cool blue hue, this PowerPoint and Google Slides template incorporates a modern, geometric style that will engage your students. Perfect for web development and coding lessons, this template will ...
Reveal JS
This series of short videos explores Reveal.js, an HTML Presentation Framework for making beautiful web presentations. In this final video, we'll look at ani...
Make interactive presentations for free
Discover a world of interactive content. Join the 25 million people designing incredible interactive experiences with Genially. Start now for free. Create clickable presentations and slide decks with animation, infographics, multimedia and beautiful design. Easy to use. 1000+ templates.
HTML5 Presentation Software
The best tool to create HTML5 presentations and animated videos. Easy & Intuitive. The user-friendly interface lets you create, publish and present your animated video presentation easily. Utilize pre-designed templates to get start quickly even if you are not a professional designer. Simply drag and drop the materials on canvas and then create ...
Lord of the Rings Animation, Creature Commandos on WB Annecy Lineup
After a hit-or-miss track record with its DC Universe, Warner Bros. put filmmaker James Gunn and producer Peter Safran in charge of the comic-based franchise in late 2022. The first fruit of their ...
Why Marvel Is Rebranding Its TV Shows
The rebrands are meant to help Marvel disabuse audiences from the pervasive impression that its content is one unified narrative experience that must be consumed in its totality. "There was a ...
'The Most Precious of Cargoes' Review: An Animated Fable From the
Every day, the woodcutter's wife prays to the "god of the train" for "a little something from your cargo.". She and her husband have barely enough to feed their starving dog, much less ...
Michel Hazanavicius Defends Holocaust Animated Film 'The Most Precious
By Anthony D'Alessandro. May 25, 2024 3:15am. Michel Hazanavicius attends the "La Plus Precieuse Des Marchandises" (The Most Precious Of Cargoes) Cannes premiere. Getty. Michel Hazanavicius said ...
Manchester United shocks Manchester City in English FA Cup final ...
Manchester United won the FA Cup on Saturday, defying the odds to defeat overwhelming favorite Manchester City 2-1 and deny its crosstown rival back-to-back league and cup doubles. A week is a ...
Pixar Lays Off 14% of Its Staff and Will Stop Making Shows for Disney+
Pixar will stop making original shows for Disney+ as part of a broader retrenchment, resulting in layoffs that will reduce its work force by 14 percent. Jim Morris, the president of Pixar ...
Studio Ghibli Makes History at Cannes With Honorary Palme d'Or
When Studio Ghibli receives its honorary Palme d'Or May 19 at the Cannes Film Festival, the creative home to Hayao Miyazaki — arguably the most admired and influential living animation ...

DEV Community

How To Build A Captivating Presentation Using HTML, CSS, & JavaScript

Built-In Themes

Changing The Theme

Custom Themes

Creating A Custom Theme

Mixins & Settings

Vertical Slides

Transitions

Top comments (18)

SBCompSciClub / prez-software

Run on Dev Server

Making a Presentation

Making a Slide

Adding Text

[DAY 15-17] I Got My First Web Dev Certification & Started Learning Javascript

PHP vs. Node.js: A Full-Stack Developer’s Guide to Choosing the Right Technology

Google's IDX: The Future of Web Dev? AI Assistant Makes Coding

Simple Method to Block Copy and Paste in Monaco Editor with React

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

Web animations with HTML, CSS, and JavaScript

Introduction

What is web animation?

What CSS properties can I animate?

Over 200k developers use LogRocket to create better digital experiences

Different kinds of animations

CSS animation

Animation properties

Why JavaScript?

LogRocket : Debug JavaScript errors more easily by understanding the context

Share this:

Stop guessing about your digital experience with LogRocket

Developing web extensions with the WXT library

Bulma CSS adoption guide: Overview, examples, and alternatives

Using Mountaineer to develop a React app with Python

Enhance CSS view transitions with Velvette

5 Replies to "Web animations with HTML, CSS, and JavaScript"

Leave a Reply Cancel reply

The HTML Presentation Framework

Hello There

Vertical Slides

Basement Level 1

Basement Level 2

Pretty Code

Even Prettier Animations

Auto-Animate

Touch Optimized

Fragment Styles

Transition Styles

Slide Backgrounds

Image Backgrounds

Iframe Backgrounds

Marvelous List

Fantastic Ordered List

Tabular Tables

Intergalactic Interconnections

Speaker View

Export to PDF

Global State

State Events

Take a Moment

75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)

7. Sausage Dog CSS Only Animation

12. Only Css 3D Cube

19. The Perpetual Mobile. (Elastic Bounce)

20. Product Page | CSS Keyframes Animation

26. ROCK 🎸

29. CSS Box Dog

30. Whale And The Moon

31. Candles (Pure CSS Animation)

32. Coffee Machine Pure CSS Animation

34. CSS Lighthouse Scene

36. Pure CSS "Moustached Nanny"

38. Books Hover Animation

42. Windmill (Pug + SCSS) - Responsive + Animated

43. CSS Mask Animation

46. CSS Animation: Indoors Or Outdoors?

47. CSS-only Border Animation

48. Pure CSS Saturn Hula Hooping

51. CSS Reveal Animation Text And Image