Einfache Animation

by Jens Grochtdreis

HTML

<div class="animation-container"></div>

CSS

.animation-container { 
    height: 160px;
    padding: 40px; 
    -moz-animation-name: movearound; 
    -moz-animation-duration: 4s; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-direction: normal; 
    -moz-animation-timing-function: ease; 
    
    -webkit-animation-name: movearound; 
    -webkit-animation-duration: 4s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-direction: normal; 
    -webkit-animation-timing-function: ease;
}

@-moz-keyframes movearound { from {
    width: 200px; 
    background: #a20000; 
    opacity: 0; 
    -moz-transform: scale(0.5) rotate(15deg);
}
} to {
    width: 400px; 
    background: #ffffa2; 
    opacity: 1; 
    -moz-transform: scale(1) rotate(0deg);
}

@-webkit-keyframes movearound { from {
    width: 200px; 
    background: #a20000; 
    opacity: 0; 
    -webkit-transform: scale(0.5) rotate(15deg);
}
} to {
    width: 400px; 
    background: #ffffa2; 
    opacity: 1; 
    -webkit-transform: scale(1) rotate(0deg);
}