標題：CSS3 動畫用設定 animation @keyframes
出處：A.PAO designSTUDIO BLOG
時間：Mon, 20 Jun 2016 11:27:14 +0000
作者：apao
地址：https://blog.apao.idv.tw/post/1174/

內容：


首先建立 @keyframes 規則

@keyframes youranimetion
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}


-- 注意點 --
Internet Explorer 10、Firefox 以及 Opera 支援@keyframes屬性
Chrome 和 Safari 則需要加上 -webkit- 的前綴
----

animation 一共有六個屬性：
animation-name（keyframe 「名稱」）
animation-duration （設定動畫的時間「1s」）
animation-timing-function （設定動畫的速度曲線「linear」「ease」「ease-in」「ease-out」「cubic-bezier(n,n,n,n)」）
animation-delay （設定動畫延遲的時間「1s」）
animation-iteration-count （設定動畫次數「1」）
animation-direction （設定是否反向播放「normal」「alternate」）

除此之外，有時候還是有不能出現的時候。請多方測試之後再使用…


Generated by Bo-blog 2.1.1 Release