-
1查看全部
-
transition-timing-function查看全部
-
linear：勻速； ease：慢-快-慢； ease-in：慢開始-快結(jié)束； ease-out：快開始-慢結(jié)束； eas-in-out：慢-快-慢。 timing-function還有幾個模式： step-start | step-end | steps(6, end) 最后一個蠻有意思的，把動畫分幾段執(zhí)行，可以用這個制作一個純css3的秒表 -webkit-transition:width 2s steps(6, end)，有興趣的試一下這個模式 秒表思路：在一個div里豎向排列1-9，每隔1秒位置往上走一步（top值）， 使用 -webkit-animation: moveten 1s steps(10, end) infinite;查看全部
-
設置3D場景 使用transform屬性調(diào)整元素 -webkit-transform-style:-webkit-preserve:3d; translate: translateX(x px) translateY(y px) translateZ(z px) rotate: rotateX(x deg) rotateY(y deg) rotateZ(z deg)查看全部
-
設置3D場景 -webkit-perspective:800; -moz-perspective:800; -o-perspective:800; perspective:800; -webkit-perspective-origin:50% 50%; -moz-perspective-origin:50% 50%; -o-perspective-origin:50% 50%; perspective-origin:50% 50%;查看全部
-
transiton:<過渡屬性名稱> <過渡時間> <過渡模式> transition-timing-function 是指過渡模式 -webkit-transition:color 2s ease-in-out; 過渡模式分別有5個值 ease 緩慢開始，緩慢結(jié)束(默認值) linear 勻速 ease-in 緩慢開始 ease-out 緩慢結(jié)束 ease-in-out 緩慢開始，緩慢結(jié)束(和ease稍有區(qū)別)查看全部
-
多個屬性的過渡效果： 方法1： -webkit-transiton:<屬性1> <時間1>,<屬性2> <時間2> -webkit-transition:color 1s,height 2s; 方法2： -webkit-transition:<屬性1> <時間1>; -webkit-transition:<屬性2> <時間2>; -webkit-transition:color 1s; -webkit-transition:height 2s;查看全部
-
-webkit-transition-property:color; -moz-transition-property:color; -o-transtion-property:color; transition-property:color; -webkit-transition-duration:1s; -moz-transition-duration:1s; -o-transition-duration:1s; transition-duration:1s;查看全部
-
-webkit-transition:color 1s; -moz-transition:color 1s; -o-transition:color 1s; transition:color 1s;查看全部
-
模式.查看全部
-
瀏覽器-transition:過渡屬性+過渡時間+過渡效果查看全部
-
沒寫Hack，用Chrome隨便看看。查看全部
-
哈哈查看全部
-
transfrom屬性也適用于2D場景，所以需要添加元素transform-style: preserve-3d查看全部
-
css 3 支持兩種動畫特性： 1. transition 設置某個屬性值平滑的過渡效果和時長 2. animation 通過設置關鍵幀來制作動畫，使動畫效果更加個性化查看全部
舉報
0/150
提交
取消