ブラウザはFirefox17・Chrome23で確認しています。また、サンプルソースのベンダープレフィックスは省略しています。
アニメーション実行後そのままの位置でとどまる。
#box01 div {
animation-duration: 3s;
animation-name: animation01;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-fill-mode: both;
}
@keyframes animation01 {
from {
left: 0;
}
20% {
left: 300px;
}
70% {
left: 300px;
background-color: #939;
}
to {
left: 600px;
background-color: #939;
}
}
赤い四角にオンマウスしたら動く、終わるかオレンジの枠内のオンマウスをやめると元の位置に戻る
#box02:hover div {
animation-duration: 3s;
animation-name: animation01;
animation-timing-function: ease-in;
animation-delay: 1s;
}
@keyframes animation01 {
from {
left: 0;
}
20% {
left: 300px;
}
70% {
left: 300px;
background-color: #939;
}
to {
left: 600px;
background-color: #939;
}
}
#box03 div {
position: relative;
top: 0;
left: 0;
background: green;
transition-property: all;
transition-duration: 3s;
transition-timing-function: linear;
transition-delay: 0;
}
#box03:hover div {
left: 600px;
}
移動しながら、色が変わる。
#box04 div {
position: relative;
top: 0;
left: 0;
background: black;
transition: background-color 1s linear 0s,left 1s linear 0s;
}
#box04:hover div {
left: 600px;
background-color: #0CC;
}
delayを使って変化のタイミングをずらす。移動したあとに、色が変わる。
#box05 div {
position: relative;
top: 0;
left: 0;
background: #F9F;
transition: background-color 3s linear 1s,left 1s linear 0s;
}
#box05:hover div {
left: 600px;
background-color: #0CC;
}