× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Animations with CSS3

Nowadays, by using CSS animations instead of action script or even javascript we can achieve faster image load and better support for mobile devices.

Motivation

Nowadays, by using CSS animations instead of ActionScript or JavaScript we can achieve faster image load and better support for mobile devices. In this article we will learn the @keyframes at-rule which defines the individual keyframes and names the animation will be used by the animation-name property.

Syntax of keyframes

CSS animations consists of following two parts:

1. A @keyframe block which defines the individual keyframes and names the animation.
2. An animation, it adds properties to a named @keyframes animation and is used to control the animation behavior.

Each keyframe starts with the @keyframes at-rule followed by a selector body in which is declared the keyframes, or waypoints, by using a percentage or the keywords from or to specifying where in the animation each step will begins. Percentage represents a percentage of the animation-duration, so a 50% keyframe in a 2s animation would be 1s into an animation.

@keyframes hello {
    from {…...} 	
    to {.....} 	
}

.showup {	
    animation-name: hello;
    animation-duration:5s
}

By using a percentage we define a percentage of the animation-duration, so a 50% keyframe in a 2s animation would be 1s into an animation.

@keyframe name {
    0% { left: 0; }
    100% { left: 100px; }
}

Sub properties of animation property

  • animation duration: The time for the animation to occur once, in seconds or in milliseconds. By default its value is 0sec.
  • animation-timing-function: Specifies the speed curve of the animation. Its values include linear,ease(the default), ease-in, ease-out, ease-in-out, cubic-bezier(), step-start, step-end and steps(). This can also be added to the @keyframes declaration to override the animation’s animation-timing-function per –keyframe.
  • animation-delay: Configures the delay between the time the element is loaded and the beginning of the animation sequence.
  • animation-direction: Configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.
  • animation-iteration-count: Configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely.
  • animation-name: Specifies the name of the @keyframes at-rule describing the animation's keyframes.
  • animation-play-state: Lets you pause and resume the animation sequence.
  • animation-fill-mode: Configures what values are applied by the animation before and after it is executing.

In order to better understand animations in CSS3 let’s move to code examples.

<!DOCTYPE html>
<html>
	<head>
		<style> 
			@keyframes example1 {
			    from {
			        margin-right: 100%;
			        margin-left: 100%;
			        width: 200%;
			    }
			    to { 
                                margin-right: 0%;
			        margin-left: 0%;
			        width: 50%;
                            }
			}

			p {
                            animation-duration: 1s;
			    animation-name: example1;
			}
		</style>
	</head>
	<body>
		<p><b>Hello, this is mr-bool site. This is the main text and it will move from right to left side</b></p>
		<p><b>This animation is applied to paragraph only you can modify it.</b></p>
	</body>
</html>
Listing 1. Animation to tag p

In Listing 1, internal style sheet is used for adding animation to tag p. First of all @keyframe rule is generated with a name "example1" which is then used by animation-name property to match an animation to its keyframe list. The keyframes are defined using the @keyframes rule. Two keyframes are defined. Here in first keyframe left & right margin of element as well as its width is configured. This will cause the first frame of the animation to have the header drawn off the right edge of the browser window. While in second keyframe left margin as well as width of element is configured. The second keyframe will finish the animation. This causes the header to finish its animation flush against the left edge of the content area.


Use of animation-delay sub property.

<!DOCTYPE html>
<html>
	<head>
		<style> 
			@keyframes example1 {
			    from {
			        margin-right: 100%;
			        margin-left: 100%;
			        width: 200%;
			    }
			    to { 
                                margin-right: 0%;
			        margin-left: 0%;
			        width: 50%;
                            }
			}

			p {
			    animation-duration: 1s;
			    animation-name: example1;
			    animation-delay: 1s;
			    animation-iteration-count: 4;
			}
		</style>
	</head>
	<body>
		<p>Hello, this is mr-bool site.This is the main text and it will move from right to left side</p>
		<p> This animation is applied to paragraph only you can modify it.</p>
	</body>
</html>
Listing 2.Two sub-properties of animation

The code in Listing 2 is same as that in Listing 1, just we have added two sub-properties of animation. The animation-delay, which will specify a delay for the start of animation. Here in our case we have given a delay of 1sec, so when we refresh our page animation will start after one second. Another property which is added is the animation-iteration-count( ), it will specify that how many times animation runs. In our case we have set its value to 4, so our animation will run four times. If you want to run your animation repeatedly without a specific count, set animation-iteration-count value to infinite (animation-iteration-count: infinite;) and your animation will continue forever.

Use of animation-direction sub property.

<!DOCTYPE html>
<html>
	<head>
		<style> 
			@keyframes example1 {
			    from {
			        margin-right: 100%;
			        margin-left: 100%;
			        width: 200%;
			    }
			    to { 
                                margin-right: 0%;
			        margin-left: 0%;
			        width: 50%;
                            }
			}

			p {
			    animation-duration: 1s;
			    animation-name: example1;
			    animation-delay: 1s;
			    animation-iteration-count: 4;
			    animation-direction: alternate;
			}
		</style>
	</head>
	<body>
		<p>Hello, this is mr-bool site.This is the main text and it will move from right to left side</p>
		<p>This animation is applied to paragraph only you can modify it.</p>
	</body>
</html>
Listing 3. Animation-direction property

Listing 3 code is similar to Listing 2, just we have added animation-direction property. We have set its value to alternate so when you run your code your paragraph will start moving from right to left and then from left to right. Also if you set its valve to “reverse” (animation-direction: reverse;) your animation will run in backward direction i.e. from left to right.

Use of animation-timing-function () sub property.

<!DOCTYPE html>
<html>
	<head>
		<style> 
			@keyframes example2 {
			    from {left: 0px;}
			    to {left: 500px;}
			}
			div {
			    width: 200px;
			    height: 100px;
			    background-color: blue;
			    font-weight: bold;
			    position: relative;
			    animation-name: example2;
			    animation-duration: 7s;
			    animation-iteration-count: 3;
			    animation-fill-mode: forwards;
			}
			#id1 { animation-timing-function: linear; }
			#id2 { animation-timing-function: ease; }
			#id3 { animation-timing-function: ease-in; }
			#id4 { animation-timing-function: ease-out; }
			#id5 { animation-timing-function: ease-in-out; }
		</style>
	</head>
	<body>
		<p><h1>Use of animation-timing-function () & animation-iteration-count () properties </h1></p>
		<div id="id1">linear</div>
		<div id="id2">ease</div>
		<div id="id3">ease-in</div>
		<div id="id4">ease-out</div>
		<div id="id5">ease-in-out</div>
	</body>
</html>
Listing 4. Animation to div tag

In Listing 4, the style sheet is used to add animation to div tag. the @keyframe rule is generated with name “example2” which is then used by animation-name property in div tag. In @keyframe rule we have set two rules. The first one occurs at 0px, here we configure it that it will start from 0px at left. The second one at 500px i.e the animation will stop at 500px from left. Inside of div tag animation-iteration-count property is used, which specifies the number of times animation to be played. Here in our case we set its value to infinite so our animation will play continuously. Finally we have used id selectors (#id1, #id2, #id3, #id4, #id5) and inside of each one we used animation-timing-function property. You can also gave it a specific value. As you know already that animation-timing-function property is used to speed the animation curve. So we used the following values:

  • linear: specifies an animation with the same speed from start to end
  • ease: specifies an animation with a slow start, then fast, then end slowly (this is default)
  • 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

In order to use your own values for speed curve, you can also use Cubic Bezier function. In body section of html, the id’s are applied to div tag. After runing the code you will see the speed of each div tag according to it animation-timing-function value, as shown in Figure 2.


Figure 2.



CSS Browser support.

Conclusion

In this tutorial we have learned how to animate in CSS3. Why we are using CSS3 animation? Further we have learned the @keyframe rule, how to name our animation and use sub properties of animation. Run the code examples by yourself so that you can see the effect of each property on animation. Finally, the browser support table is also shown, you can use CSS3 for these browser without adding any extra prefix to your code for specific version.



MrBool is a totally free website made for software developers. Our articles and courses are totally free with focus on useful techniques and best practices

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login