Transition effect, animation effect, transform effect

The wording of the transition effect

-webkit-transition:all 5s ease-in 0s;

How the Animation works:

H1 {
-WEBKIT-ANIMATION:CC 10s ease-in 0 infinite alternate;
}
@-webkit-keyframes cc {
0% {color:red;}
20% {color:green;}
50%{color:yellow;}
75%{color:gray;}
100%{color:purple;} /* Purple */
}

h1:hover{
-webkit-animation-play-state:paused; Put the mouse on the animation stop

}

Combining animations and transformations

One:

img{
-webkit-animation:yy 0.2s ease-in 0s infinite normal}
@-webkit-keyframes yy{
From{-webkit-transform:rotate (360DEG)}
to{
-webkit-transform:rotate (0);
}
}

Two:

h1{

width:300px; /* Definition of a wide height does not have the following scroll bar */
-webkit-animation:yy 0.5s ease-in 0 Infinite Alternate;
}
@-webkit-keyframes yy{
from{
-webkit-transform:translate (0,0);}
To{-webkit-transform:translate (100px,100px);}
}

-webkit-transform:scale (0.5,0.5); Less than 1 is scaled down, greater than 1 is enlarged

-webkit-transform:rotate (45DEG); Transform effect rotates 45 degrees

Transition effect, animation effect, transform effect