Web Development

CSS3 with Animation

CSS3 with Animation is the section 10 of Basics of CSS3.

As we said in the previous section, before the emergence of CSS3, things were done differently when it comes to the subject of animation. We used Javascript or Flash or Animated Images to have animation on our web pages. Even for the simplest transition we have to upload above mentioned things. But with CSS3, you will never needed them again. Before moving on we need to go through a specific rule class.

CSS3 Animation @keyframes Rule

The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.

When an animation is created in the @keyframe rule, you must bind it to a selector, otherwise the animation will have no effect.

Bind the animation to a selector (element) by specifying at least these two properties:

  •  the name of the animation
  •  the duration of the animation

But the problem with mentioning only above two only is, it make only runs the animation in one time. If you like to mention the number of times it needed to run you can specify it also. Let’s go with the shorthand property first and then look into standard property for each of them.

This is how the code is written.

[code language=”css”] div {
animation: myfirst 5s infinite;
}
@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
[/code]

We are going to change the color of a division tag, red to blue in infinite times. One transition of colors will take place around 5 seconds. But remember if the duration part is not specified, the animation will have no effect, because the default value is 0. An animation lets an element gradually change from one style to another. You can change as many properties you want, as many times you want. You can specify when the change will happen in percent, or you can use the keywords “from” and “to” (which represents 0% and 100%). 0% represents the start of the animation, 100% is when the animation is complete. Let’s look at how to use this percentage rules.

[code language=”css”] @keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
[/code]

Here we had several color transitions. It change the background color when the animation is 25%, and 50%, and again when the animation is 100% complete

Now let’s see how to add a motion with a color change. The below code snippet will change the background color and the position when the animation is 25%, 50%, 75%, and again when the animation is 100% complete.

[code language=”css”] @keyframes myfirst {
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
[/code]

Now it’s time to expand the shorthand property, and look into what are the standard properties that comes with CSS3 animation.

[code language=”css”] div{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;< animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } [/code] Let's see what each one means.
Property Description CSS
animation-delay Specifies when the animation will start 3
animation-direction Specifies whether or not the animation should play in reverse on
alternate cycles
3
animation-duration Specifies how many seconds or milliseconds an animation takes to
complete one cycle
3
animation-fill-mode Specifies what styles will apply for the element when the animation is
not playing (when it is finished, or when it has a “delay”)
3
animation-iteration-count Specifies the number of times an animation should be played 3
animation-name Specifies the name of the @keyframes animation 3
animation-play-state Specifies whether the animation is running or paused 3
animation-timing-function Specifies the speed curve of the animation 3

So far we came across cool animation techniques offers with CSS3. We did color transitions, movements and lot of amazing things. That’s all about motion. In the next section we are going to discuss about something that is really important when developing online news papers.

WHAT’S NEXT?

How to Create News Paper Columns.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW