*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2016年12月20日 星期二

動畫的使用與設計 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;}
}



參考圖像 






沒有留言:

張貼留言