css animation guide code example
Example 1: css animation
CSS animation properties template:
{
animation-name: anima-name;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-delay: 2s;
animation-direction: reverse | normal | alternate | alternate-reverse ;
animation-timing-function: ease | ease-out | ease-in | ease-in-out | linear | cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0));
animation-fill-mode:forwards | backwards | both | none;
}
@keyframes anima-name {
from {
background-position:right;
}
to {
background-position:left;
}
}
@keyframes anima-name {
0% {
background-color: red;
}
50% {
background-color: green;
}
100% {
background-color: red;
}
}
Example 2: css animation
<style>
#ball {
width: 100px;
height: 100px;
margin: 50px auto;
position: relative;
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-delay: 2s;
animation-direction: reverse;
animation-timing-function: linear;
}
@keyframes bounce{
0% {
top: 0px;
}
50% {
top: 249px;
width: 130px;
height: 90px;
}
100% {
top: 0px;
}
}
</style>
<div id="ball"></div>
Example 3: learn css animation
Read this helpful, short and straightforward article to learn CSS animation perfectly.
https://medium.com/@Cafe_Code/learn-css-animation-asap-as-simple-as-possible-374b7874d4dd
Example 4: webkit animation
@-webkit-keyframes pulse {
0% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
33% {
background-color: blue;
opacity: 0.75;
-webkit-transform: scale(1.1) rotate(-5deg);
}
67% {
background-color: green;
opacity: 0.5;
-webkit-transform: scale(1.1) rotate(5deg);
}
100% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
}
.pulsedbox {
-webkit-animation-name: pulse;
-webkit-animation-duration: 4s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}