What Are Animations In CSS?
Animations are when an object performs a movement or property change over time. In CSS this can be done through a variety of properties. or we can say The animation property in CSS can be used to animate many other CSS properties such as color, background-color, height, or width. Each animation needs to be defined with the @keyframes at-rule which is then called with the animation.

These animations could be useful to add a whole range of interaction to users viewing your website or to gain affection and attraction from the user.

Structure:
animation:{animation} {time};
-webkit-animation:{animation} {time}; /* Safari and Chrome */

@keyframes {name}
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes {name} /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}

Example:

div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 2s; /* Safari and Chrome */
}

@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}

class='myClass'
id='myID'

if you chose an id.

Make sure you replace ‘myClass’ and/or ‘myID’ with your unique name. Then, in the CSS you will want to encase your properties with…


.myClass {
//Properties go here
}

if you chose a class, or…

#myID {
//Properties go here
}

(You can remove the line beginning with // if you wish).

Here’s an example…

 

This is text!


By putting our responsive queries at the bottom of the page, we ensure that any properties we have set prior to the queries are overwritten.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

twenty − eleven =