CSS Archives - WebHike Blogs



CSS Animations


What are CSS Animations?

By CSS animations you can style from one style to another and also animate it. You’ll be able to modification as several CSS properties you wish, as repeatedly you wish. To use CSS animations, you have to know some keyframes for the animations.

When you insert CSS style within the @keyframes rule, the animations can step by step change from the present vogue to the new vogue at bound times.

To run CSS animations perfectly , you need to bind the animation to a component.

The following example binds the “example” animation to the component. The animation can display for four seconds, and it’ll step by step modification the background-color of the block from “red” to “yellow”:

Try Code: https://jsfiddle.net/z3x8uanj/

The Animation-duration property defines however while an animation ought to fancy complete. So, if the animation-duration property isn’t fixed, no animation can occur, as a result of the by-default value is ‘0 seconds’.

In the example higher than we’ve fixed once the style can modification by exploitation the keywords “from” and “to” that represents 0% start value and 100% complete value. You can also use ‘%’ as many times as you wish.


Delay in CSS Animations

The CSS animation-delay property is used to delay the animation at start. For Example you can use the following  style:

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;

You can also use negative values. If you use negative values, the animation will look like that it is  already running. In the following example, the animation can begin as if it had already been taking part in for 2 seconds:

Try Code: https://jsfiddle.net/xuzhpjeg/


Speed of the Animation

The animation-timing-function property is used for the speed for the CSS animtion.

The following properties can be use while using animation-timing-function property:

  • ease – Animation with a slow start and then fast and then end slowly.  This style is default.
  • linear – Animation with the constant speed from start to end of animation.
  • ease-in – Animation with a very slow start
  • ease-out – Animation with a slow end
  • ease-in-out – Animation with a slow start and slow end
  • cubic-bezier(0,0,0,0) – You can define you own desired values in a this function

In following example it shows some of the different types of speed of anmitaion that you can use:

Try Code: https://jsfiddle.net/xuzhpjeg/


Try the best backlinks checker list

CSS Animations : Data Collected from: W3Schools

read more