<![CDATA[A.PAO designSTUDIO BLOG]]> https://blog.apao.idv.tw/index.php zh-tw https://blog.apao.idv.tw/post// <![CDATA[CSS3 動畫用設定 animation @keyframes]]> apao <apao@www.apao.idv.tw> Mon, 20 Jun 2016 03:27:14 +0000 https://blog.apao.idv.tw/post//
首先建立 @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」）

除此之外，有時候還是有不能出現的時候。請多方測試之後再使用…
Tags - , , , ]]> https://blog.apao.idv.tw/post//#blogcomment <![CDATA[[評論] CSS3 動畫用設定 animation @keyframes]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 https://blog.apao.idv.tw/post//#blogcomment