動畫的使用與設計 CSS: @keyframes

動畫的使用與設計
CSS: @keyframes

教學影音  click!!

自動啟動的動畫效果

<style>

div.imagkey1220 {
color: gray;
-webkit-animation: myanim16122001 5s infinite;
animation-timing-function: linear;
}

@-webkit-keyframes myanim16122001 {
0%  {padding-left: 0px;}
50% {padding-left: 220px;}
100% {padding-left: 500px;}
}

img.keyrota {
-webkit-animation: myanim16122002 3s infinite;
animation-timing-function: linear;
}

@-webkit-keyframes myanim16122002 {
0%  {-webkit-transform: rotate(-0deg);}
30% {-webkit-transform: rotate(-15deg);}
50% {-webkit-transform: rotate(-45deg);}
80% {-webkit-transform: rotate(-90eg);}
100% {-webkit-transform: rotate(-60deg);}
}

</style>

滑鼠移入啟動移出停止的效果

<style>

div.imagkey1220b {
color: gray;
-webkit-animation: myanim16122001 5s infinite;
animation-timing-function: linear;
animation-play-state: paused;
}

@-webkit-keyframes myanim16122001 {
0%  {padding-left: 0px;}
50% {padding-left: 220px;}
100% {padding-left: 500px;}
}

div.imagkey1220b:hover {
animation-play-state: running;
}

img.keyrota {
-webkit-animation: myanim16122002 3s infinite;
animation-timing-function: linear;
}

@-webkit-keyframes myanim16122002 {
0%  {-webkit-transform: rotate(-0deg);}
30% {-webkit-transform: rotate(-15deg);}
50% {-webkit-transform: rotate(-45deg);}
80% {-webkit-transform: rotate(-90eg);}
100% {-webkit-transform: rotate(-60deg);}
}

</style>

教學影音  click!!

補充資料css：上面會自動移動的play icon


.teamov16122601 {
background-image: url(圖像網址);
background-repeat: no-repeat;
background-size: 24px;
background-position: left center;
padding-left: 30px;
font-family: Verdana, '微軟正黑體';
font-size: 1.21em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
cursor: pointer;
}

.teamov16122601:hover {
-webkit-animation: myanim16122601 0.5s infinite;
animation-timing-function: linear;

}

@-webkit-keyframes myanim16122601 {
0%  {background-position: left center;}
100% {background-position: left 2px center;}
}



參考圖像