CSS Transition Animation

CSS Transition Animation
CSS Transition animation is more simple and easy to use in any where on page more effectable.

CSS animation is a method of animating certain HTML elements without having to use JavaScript.
CSS animations make it possible to animate transitions from one CSS style configuration to another. Each animation needs to be defined with the @keyframes at-rule which is then called with the animation property. You can also add CSS Tratsition on page scroll down.

Name: animation-name

Declares the name of the @keyframes at-rule to manipulate.
animation-name: none;
animation-name: fadeIn;
animation-name: moveRight;

Duration : animation-duration:

Specifies how many seconds or milliseconds that an animation takes to complete one cycle of the animation.
animation-duration: 0s;
animation-duration: 1.2s;
animation-duration: 2400ms;

Timing : animation-timing-function:

Defines how the values between the start and the end of the animation are calculated.
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
animation-timing-function: steps(4, end);

Timing Delay: animation-delay:

Configures the delay between the time the element is loaded and the beginning of the animation sequence.
animation-delay: 0s;
animation-delay: 2400mss;
animation-delay: -500ms;

Direction : animation-direction:

The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles.
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

Iteration : animation-iteration-count:

the number of times the animation should be performed. you can also specify infinite to repeat the animation indefinitely.
animation-iteration-count: 1;
animation-iteration-count: infinite;

Fill Mode : animation-fill-mode:

Specifies how a CSS animation should apply styles to its target before and after it is executing.
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

Play State : animation-play-state

Specifies whether the animation is running or paused
animation-play-state: running;
animation-play-state: paused;

CSS Transition Example

.element {
animation-name: stretch;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}

A @-webkit-keyframes block contains rule sets called keyframes. A keyframe defines the style that will be applied for that moment within the animation.

Example:

 div {
-webkit-animation-name: bounce;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 10;
-webkit-animation-direction: alternate;
}

The main concept of this demo is once the page is loaded, the page should “appear” three DIVs one after another by using animations. For this creation we are creating 3 boxes. Those three boxes are created by specified height,weight,background.For the creation of three boxes we defined 3 classes like .one, .two, .three. for that each class we created some properties like animation,animation-delay,animation-iteration-count,animation-fill-mode.

The animation-delay property specifies a delay for the start of an animation.
for class .one we defined animation-delay as 2s.
for class .two we defined animation-delay as 3s.
for class .three we defined animation-delay as 4s.
The animation-iteration-count property sets the number of times the animation plays, either as an integer or infinite.in this we specified only one time if we want n no.of time it is possible.
The animation-fill-mode property preserves an animation’s start state before a delayed animation executes (backwards),its end state after its final iteration (forwards), or both.animation-fill-mode is forwards.

.one {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: mymove 1s; /* Safari 4.0 - 8.0 */
  -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
  animation: mymove 1s;
  animation-delay: 2s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
   0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes mymove {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.two {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: mymove2 1s; /* Safari 4.0 - 8.0 */
  -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
  animation: mymove2 1s;
  animation-delay: 3s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove2 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes mymove2 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.three {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: mymove2 1s; /* Safari 4.0 - 8.0 */
  -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
  animation: mymove2 1s;
  animation-delay: 4s;
    animation-iteration-count:1;
    animation-fill-mode: forwards;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove2 {
   0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes mymove2 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
div{
opacity:0;
margin-bottom:20px;
}

By using all this 3 classes we created 3 boxes with width: 100px; height: 100px; background: red; and
for animation we used
animation: mymove 1s;
animation-delay: 2s;
animation-iteration-count:1;
animation-fill-mode: forwards;
By using all this poperties the animation will start one after one .

<p>  the animation will start one after one </p>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<p><strong>Note:</strong> The animation-delay property is not supported in Internet Explorer 9 and earlier versions.</p>

The animation-delay property is not supported in Internet Explorer 9 and earlier versions.
To support animation in safari we used @-webkit-keyframes mymove,@keyframes mymove , @-webkit-keyframes mymove2 ,@keyframes mymove2, -webkit-animation: mymove2 1s, -webkit-animation-delay: 2s .

Comment on “CSS Transition Animation

  1. Magnificent website. Plenty of helpful information here. I am sending it to several buddies ans also sharing in delicious. And obviously, thank you to your sweat!

Leave a Reply

Your email address will not be published. Required fields are marked *