CSS3 Animation For Dummies

综合技术 2017-11-15 阅读原文

Have you ever wondered how to make an HTML element dance?

Well, after reading this you'll be ready to make them dance thanks to CSS3 animation. Are you ready?

Animation declaration

First, you have to declare the animation.

**What is declaring?

Declaring is building all the process of the animation, it's like a dance, you'll say that on step one I'll do the rotate move , on step two: I'll go to the right with 200px for example, it's where you create your own dance.


okay, calm down, now that you get the whole idea, I'll tell you how to declare it:

@keyframes dance {
  transform: rotate(30deg)

   transform: rotate(60deg);
   background: rgb(41, 128, 185);

Here's an example of a stupid animation called dance.

we write @keyframes + the name you choose for your animation (I chose dance as I'm obsessed with dancing since the beginning of this post), then you open your curly braces {} and inside the animation you define your steps.

You can write as many steps as you want 10% 20% 30% .. maybe even 0.1% 0.2% 0.3%.. but that won't be necessary (hah!).

Inside the steps, play with css like you want as you can use what ever CSS property you want to.

Now, before going to the next step to make your animation works, I've just a little notice:

0% => from.

100% => to.

that's it! what's that? well, to make an animation with only two steps, you can use 0% and 100% or "from" and "to" instead like that:

 @keyframes dance {
   transform: rotate(30deg)


   transform: rotate(60deg);
   background: rgb(41, 128, 185);

So if you see something like that you'll understand it (I know you will because it's obvious and readable ,but I thought I should mention it)

Now, after creating your dance , will the element dance ?


You've just wrote the steps of the animation but you didn't call it.

Calling the animation

I'll just write a code example and I'll explain what's not obvious!


   animation-iteration-count: infinite;

This is how to call your animation (I didn't mention all animation properties but I'll do later).

First, animation-name
is to tell what animation should work and make your element dance.

Then, animation-duration
(in seconds) is obvious (the time the dance should take).

animation-delay(in seconds) : the time when the animation is holding up before starts working (it's like the time you wait the music to start dancing).

animation-iteration-count: is how many times you want the animation to repeat itself: 2, 4 , 5 ? or infinite : the animation repeats itself ∞ times!

animation other properties

animation-timing-function: it looks like as a frightening name as Voldemort but it's nothing but a transition like property and here are the possibilities:

your-element {animation-timing-function: linear}
your-element {animation-timing-function: ease}
your-element {animation-timing-function: ease-in}
your-element {animation-timing-function: ease-out}
your-element {animation-timing-function: ease-in-out}

so, animation-timing-function
specifies how the speed will be from the beginning of the dance to the end :

animation-timing-function: lineardefines a constant speed from the beginning of the animation until the end.

animation-timing-function: easemakes the animation goes first then it will goes as fast as Bolt then it goes slow again like the beginning.

animation-timing-function: ease-in: slow beginning.

animation-timing-function: ease-out: slow ending.

animation-timing-function: ease-in-out: it's the cocktail of the last two properties (slow beginning and slow ending).

animation-directionlike its name it defines the direction of the animation:

Do you remember the first time you saw a video playing in reverse and you were fascinated?

well, you can do that too here:

animation-direction: reverse:The animation will begin from the last steps to the first ones.

animation-direction:alternate: The animation will be reversed the first repetition then it goes normal (from the first steps to the last ones) then reverse then normal until there's no other animation repetition (animation-iteration-count).

animation-play-state: it takes whether running(default) or paused (i think it's more than obvious).

animation shorthand

You can merge all the properties in a shorthand (I only recommend using this after a quite good practice duration).

   animation: duration | timing-function | delay | 
   iteration-count | direction | fill-mode  | play-state | name}

 for example: 
   animation: 2s ease-in 1s 8 reverse both paused dance}

Now you know how to create your own animation and how to call it, I'll give you a simple animation I've made called the dance (for sure) , edit it as you like !

My simple Codepen animation

a better one?

Make yours too and dance with it !

The Practical Developer

责编内容by:The Practical Developer阅读原文】。感谢您的支持!


Links not highlighting in Android browser after CS... I have the following setup: Element with CSS3 animated height change Link ...
重构之旅(二) css3属性之多栏布局与JS实现瀑布流 背景:之前打算自己总结一下flex布局的知识点,发现自己无从下手,原因在何处:我反思了一下,其实原因很简单,使...
css3 circular image not working I am trying to make a square picture circular using css 3. per request...
How do I animate an element to swing in CSS3? Since I saw the Treahouse website and the sign effect swinging in the tree...
css3 loader alignment in breadcrumb I have place a css loader div inside breadcrumb menu but the loader is pushing t...