天天看點

CSS3屬性transition 屬性、animation屬性transition 過渡屬性animation屬性

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

指定切換效果的速度

CSS3屬性transition 屬性、animation屬性transition 過渡屬性animation屬性

4.transition-delay

延遲秒或毫秒數切換效果才開始

怎麼設定多個過渡屬性name

多個屬性逗号隔開

transition: transform 2s ease, border-radius 3s ease-out;

animation屬性

animation屬性是一個簡寫屬性,細分有8個屬性,前四個屬性和過渡屬性一樣
CSS3屬性transition 屬性、animation屬性transition 過渡屬性animation屬性

使用例子

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;}

}

繼續閱讀