-
1查看全部
-
transition-timing-function查看全部
-
linear：匀速； ease：慢-快-慢； ease-in：慢开始-快结束； ease-out：快开始-慢结束； eas-in-out：慢-快-慢。 timing-function还有几个模式： step-start | step-end | steps(6, end) 最后一个蛮有意思的，把动画分几段执行，可以用这个制作一个纯css3的秒表 -webkit-transition:width 2s steps(6, end)，有兴趣的试一下这个模式 秒表思路：在一个div里竖向排列1-9，每隔1秒位置往上走一步（top值）， 使用 -webkit-animation: moveten 1s steps(10, end) infinite;查看全部
-
设置3D场景 使用transform属性调整元素 -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 缓慢开始，缓慢结束(默认值) linear 匀速 ease-in 缓慢开始 ease-out 缓慢结束 ease-in-out 缓慢开始，缓慢结束(和ease稍有区别)查看全部
-
多个属性的过渡效果： 方法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
提交
取消