CSS Animation

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;}
}


COMMENTS




Read 866 times.

Online Users: 3837



css-animation