CSS Animations

➢CSS allows animation of HTML elements without using JavaScript or Flash!
➢@keyframes
➢animation-name
➢animation-duration
➢animation-delay
➢animation-iteration-count
➢animation-direction
➢animation-timing-function
➢animation-fill-mode
➢animation

EXAMPLE:

@keyframes example {
     from {background-color: red;}
     to {background-color: yellow;}
}

.bmr {
     width: 100px;
     height: 100px;
     background-color: red;
     animation-name: example;
     animation-duration: 4s;
     animation-iteration-count: 60;
}

Run

Set How Many Times an Animation Should Run

➢The animation-iteration-count property specifies the number of times an animation should run.

EXAMPLE:

@keyframes example {
     0% {background-color:red; left:0px; top:0px;}
     25% {background-color:yellow; left:200px; top:0px;}
     50% {background-color:blue; left:200px; top:200px;}
     75% {background-color:#4CAF50; left:0px; top:200px;}
     100% {background-color:red; left:0px; top:0px;}
}

.bmr {
     width: 100px;
     height: 100px;
     position: relative;
     background-color: red;
     animation-name: example;
     animation-duration: 4s;
     animation-iteration-count: 60;
}

Run

Prev Page Next Page