animation-fill-modeのサンプル
.s {
width: 50px;
height: 50px;
border-radius: 50%;
background: #C00;
-webkit-animation: foo 2s 1 forwards;
animation: foo 2s 1 forwards;
}
@-webkit-keyframes foo {
0% {
-webkit-transform: translate(0, 0);
}
100% {
-webkit-transform: translate(200px, 0);
}
}
@keyframes foo {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(200px, 0);
}
}
animation-fill-modeなしの場合
.ss {
width: 50px;
height: 50px;
border-radius: 50%;
background: #C00;
-webkit-animation: foo 2s 1;
animation: foo 2s 1;
}
@-webkit-keyframes foo {
0% {
-webkit-transform: translate(0, 0);
}
100% {
-webkit-transform: translate(200px, 0);
}
}
@keyframes foo {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(200px, 0);
}
}