CSS3 Animation
Thanks to the new developments, animations can be given to the objects in the page without using languages such as JQuery, JavaScript, Flash, etc.
Animations created with CSS are more and more preferred because they are both more practical and create less code complexity.
However, it should be noted that css animations will not work in older browser versions.
|
|
The codes of these examples are given in the Subject Examples section. First of all, let's learn how to make animation with css.. |
|
|
How to Make Animation with CSS
Creating animation with CSS is done in two steps.
1. step - keyframes rule:
The @keyframes property specifies which changes will occur at which stage of the animation. The time phases in this section can be specified in different ways. Examine the two examples below.
Example1: An animation named animation1 is created below, its initial features are determined in the from section, and its final state is determined in the to section. In this example, it is determined that the background color will change from blue to green.
@keyframes animation1 {
from {background-color: blue;}
to {background-color: green;}
}
Example2: The desired changes can be made at the desired time of the animation with a usage like the one below. In this example, the background color will alternately change to blue, red, orange, and green. The time to turn into each color will be calculated by the browser, based on the total duration of the animation.
@keyframes animation2 {
0% {background-color: blue;}
25% {background-color: red;}
50% {background-color: orange;}
100% {background-color: green;}
}
2. Step
After creating the animation as above, it can be applied to the desired objects with Css.
At the application stage, features such as the total duration of the animation, the delay time, the way of acceleration, and the direction are also specified.
The following features can be used in css animations:
animation-name: Which of the animations created with @keyframes as above will be used
animation-duration: The total duration of the animation in seconds (like 4s)
animation-delay: Time to wait before animation starts, in seconds (like 2s)
animation-iteration-count: How many times the animation will repeat.
animation-direction: With the Reverse value, the animation is applied from the end to the beginning of this object
. By giving the Alternate value, a straight and reverse operation can be achieved sequentially.
animation-timing-function: The way the animation is accelerated is specified here. Its linear value ensures constant speed. Other possibilities are:
ease: starts slow, speeds up, slows down again
linear: works without acceleration, at a constant speed
ease-in: starts slow, gets faster
ease-out: slows down towards the end
ease-in-out: runs slowly at the beginning and end
cubic-bezier(n,n,n,n): you can create your own values with the help of a function.
Example1: In this example, animation2 will be applied to objects with applied box1 class. The total time is 4 seconds.
.box1 {
width: 50px;
height: 50px;
background-color: blue;
animation-name: animation2;
animation-duration: 4s;
}
Example2: In this example, animation2 will be applied to objects that have the box2 class applied. It is provided to last 4 seconds in total, have a constant speed, delay 1 second, repeat continuously, and play a straight reverse.
.box2 {
animation-name: animation2;
animation-duration: 4s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Shorthand for Animation Properties
All animation properties used in the example above can also be specified in a single line. Sample:
.box2 {
animation: animation2 4s linear 1s infinite alternate;
}
how to animate with css, create css animation, move objects with css, css animation examples, how to make css animations transitions
EXERCISES
|
Css Animation Tutorials 2
|
Try It
|
.kutu4 {
width: 120px;
padding:10px 5px;
position: relative;
animation-name:animasyon4;
animation-duration:4s;
border: 2px solid #F6F;
}
@keyframes animasyon4 {
0% {left:0px;border: 2px solid #F6F; -ms-transform: matrix(1, 0, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, 0, 0, 1, 0, 0); /* Safari */
transform: matrix(1, 0, 0, 1, 0, 0);}
50% {left:110px;border: 2px solid #3FC;-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);}
100% {left:0px;border: 2px solid #F6F;-ms-transform: matrix(1, 0, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, 0, 0, 1, 0, 0); /* Safari */
transform: matrix(1, 0, 0, 1, 0, 0);}
}
|
Css Animation Tutorials
|
Try It
|
div {
width: 120px;
padding:10px 5px;
position: relative;
background-color: blue;
animation-name: animasyon3;
animation-duration: 6s;
animation-iteration-count: infinite;
font-weight: bold;
text-align: center;
}
@keyframes animasyon3 {
0% {background-color: blue; left:0px; top:0px;}
25% {background-color: yellow; left:0px; top:100px;}
50% {background-color: green; left:200px; top:100px;}
75% {background-color: orange; left:200px; top:0px;}
100% {background-color: blue; left:0px; top:0px;}
}
Read 824 times.