CSS Animations and Transitions in asp.net

Description:-

CSS animations are finally available in all major browsers, even in IE (since version 10). There are two ways to create CSS animations. The first is very easy, it is done through animating the changes of CSS properties with the transition declaration. With transitions, you can create hover or mouse down effects, or you can trigger the animation by changing the style of an element with JavaScript. You can see the transition below by hovering over the planet – this will cause the rocket to close in.

The second way for defining animations is a bit more complicated – it involves the description of specific moments of the animation with the @keyframe rule. This allows you to have repeating animations that don’t depend on user actions or JavaScript to get triggered. Hit the Edit button to see the code.

HTML:-

<div class="container">
  <div class="planet"></div>
  <div class="rocket"></div>
</div>

CSS:-

.container{
 width: 300px;
 height:300px;
 margin: 0 auto;
 position:relative;
 overflow:hidden;
}

.planet{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/planet.png) no-repeat center center;
}

.rocket{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket.png) no-repeat 50px center;

 /* Chrome still requires the -webkit- prefix */
 -webkit-animation:orbit 2s linear infinite;
 animation:orbit 2s linear infinite;

 transition:background-position 0.8s;
}

.container:hover .rocket{
 background-position:80px center;
}

/* Define the keyframes of the animation */

@-webkit-keyframes orbit {
 from {
  -webkit-transform:rotate(0deg);}
 to {
  -webkit-transform:rotate(360deg);
 }
}

@keyframes orbit {
 from {
  transform:rotate(0deg);

  /* I am including the -webkit-transform properties, because
     Chrome might start supporting keyframe without prefix in the future,
     but we can't be certain whether it will support prefix-free transform
     at the same time */

  -webkit-transform:rotate(0deg);}
 to {
  transform:rotate(360deg);
  -webkit-transform:rotate(360deg);
 }
}

Author : Umesh Patel

Related Posts