animationプロパティは，transitionプロパティよりも高機能な印象がありますが，色々試すと，transitionプロパティのみの機能もあるようです。 その１つは，transitionは戻るときもアニメーションしますが，animationは戻るときにアニメーションしないということです。（下の表内のイラストにマウスをあてると，イラストがアニメーションします。）
transitionプロパティの場合（戻るときもアニメする）
| animationプロパティの場合（戻るときは瞬間的） |
NetCommonsの共通エディタでは，１つのstyleタグの中に複数の@keyframesを並べて書いたり，@keyframesに続けてCSSを書いたりすると機能しないことがあるようです。そういうときは，１つ１つ<style></style>で囲むと動きます。<!-- transition -->
<style>
img.transition {
transition-duration:0.5s;
}
img.transition:hover {
transform: translateX(-100px) scale(1.5) rotate(-20deg);
}
</style>
<!-- animation -->
<style>
@keyframes animation {
0% {
transform: translateX(0px) scale(1.0) rotate(0deg);
}
100% {
transform: translateX(-100px) scale(1.5) rotate(-20deg);
}
}
</style>
<style>
img.animation {
animation-duration:0.5s;
}
img.animation:hover {
animation-name: animation;
animation-fill-mode: forwards;
}
</style>
<!-- transition -->
<img class="transition" src="./?action=common_download_main&upload_id=109" alt="" title="" hspace="0" vspace="0" style="width:185px;height:160px;border:0px solid rgb(204, 204, 204);float:none;" />
<!-- animation -->
<img class="animation" src="./?action=common_download_main&upload_id=109" alt="" title="" hspace="0" vspace="0" style="width:185px;height:160px;border:0px solid rgb(204, 204, 204);float:none;" />
検索
VB.NET Tips
3Dプリンター
