Animation przykłady

animation (1)

<div class="item-1">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... </p>
</div>
.item-1 {
	background: #289DCC;	
        animation: ex1 5s infinite alternate;
}

@keyframes ex1 {
	0%   { background-color: #289DCC; }
	50%  { background-color: #000000; }
	100% { background-color: #FB0101; }
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis adipisci temporibus, dolorum quos. Culpa minus dignissimos, quas alias quos at facere eaque hic amet quae, atque. Numquam magni recusandae cupiditate nihil praesentium quia sit, laborum, cum perferendis perspiciatis doloribus atque veniam. Reprehenderit voluptate quia architecto corrupti nobis provident dolorem veritatis, ea maiores ducimus incidunt itaque harum id reiciendis ipsa nulla.

animation (2)

<div class="item-2" id="div1">linear</div>
<div class="item-2" id="div2">ease</div>
<div class="item-2" id="div3">ease-in</div>
<div class="item-2" id="div4">ease-out</div>
<div class="item-2" id="div5">ease-in-out</div>
.item-2 {
	background: #289DCC;
	position: relative;
	animation: ex2 5s infinite alternate;
}

#div1 { animation-timing-function: linear; }
#div2 { animation-timing-function: ease; }
#div3 { animation-timing-function: ease-in; }
#div4 { animation-timing-function: ease-out; }
#div5 { animation-timing-function: ease-in-out; }

@keyframes ex2 {
	from { left: 0px; }
	to { left: 85%; }
}
linear
ease
ease-in
ease-out
ease-in-out

animation (3)

<div class="item-3">Hello!!</div>
.item-3 {
    background: #289DCC;
    position: relative;
    animation-name: ex3;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

@keyframes ex3 {
    0%   { background-color: OrangeRed; left: 0px; top: 0px; }
    25%  { background-color: Gold; left: 300px; top: 0px; }
    50%  { background-color: DeepSkyBlue; left: 300px; top: -200px; }
    75%  { background-color: LimeGreen; left: 0px; top: -200px; }
    100% { background-color: OrangeRed; left: 0px; top: 0px; }
}
Hello!!

animation (4)

<div class="item-4">Hello!!</div>
.item-4 {
    background: #289DCC;
    position: relative;
    animation-name: ex4;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
}

@keyframes ex4 {
    0%   { background-color: OrangeRed; left: 0px; top: 0px; }
    25%  { background-color: Gold; left: 200px; top: 0px; }
    50%  { background-color: DeepSkyBlue; left: 200px; top: -200px; }
    75%  { background-color: LimeGreen; left: 0px; top: -200px; }
    100% { background-color: OrangeRed; left: 0px; top: 0px; }
}
Hello!!

animation (5)

<div class="item-5">Hello!!</div>
.item-5 {
    background: #289DCC;
    position: relative;
    animation-name: ex5;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes ex5 {
    0%   { background-color: OrangeRed; left: 0px; top: 0px; }
    25%  { background-color: Gold; left: 200px; top: 0px; }
    50%  { background-color: DeepSkyBlue; left: 200px; top: -200px; }
    75%  { background-color: LimeGreen; left: 0px; top: -200px; }
    100% { background-color: OrangeRed; left: 0px; top: 0px; }
}
Hello!!

animation (6)

<img src="spirala-blue.png" alt="img" class="item-6"> 
.item-6 {
	animation: rotation 2s infinite linear;
}

@keyframes rotation {
	from { transform: rotate(0deg); }
	to { transform: rotate(359deg); }
}
img

animation (7)

<div class="item7-hold"><div class="item-7"></div></div>
.item7-hold{
	overflow: hidden;
}

.item-7 {
	background: url("auto.png") repeat-x;
	height: 79px;
	width: 2000px;
	animation: slide 1s linear infinite;
}

@keyframes slide {
	0% { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(-200px, 0, 0); }
}