transition 過渡屬性
transition 屬性是一個簡寫屬性,用于設定四個過渡屬性:
注意:CSS3的transition支援visibility屬性,但是并不支援display,由于transition可以延遲執行,是以可以配合visibility使用純css實作hover延時顯示效果。提高使用者體驗。
1.transition-property
指定CSS屬性的name,(如:width、color、transform 、border-radius),transition過渡效果
2.transition-duration
transition效果需要指定多少秒或毫秒才能完成
3.transition-timing-function
指定切換效果的速度
4.transition-delay
延遲秒或毫秒數切換效果才開始
怎麼設定多個過渡屬性name
多個屬性逗号隔開
transition: transform 2s ease, border-radius 3s ease-out;
animation屬性
animation屬性是一個簡寫屬性,細分有8個屬性,前四個屬性和過渡屬性一樣
使用例子
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:mymove;
animation-duration:5s;
/* Safari and Chrome */
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}