之后我们来看下曲率对应速率变化的规律。X轴和Y轴,我们理解为时间轴和距离变化轴,那么单位时间内,距离变化的多少,反应出来的就是速度的快慢。
下图中,X轴的切分是均等的,同时虚线矩形内,x1对应的y1、x2对应的y2,也是相等的,那么认为起点到终点是匀速变化的。
下图中,X轴的切分是均等的,同时虚线矩形内,x1对应的y1 大于 x2对应的y2,那么认为起点到终点的运动过程中,速度是先快后慢的。
这两种曲线反应到具体的动画之中的效果如下。
CSS动画中,使用贝塞尔曲线作为值的属性有两个,transition-timing-function,animation-timing-function,格式为cubic-bezier(P1x,P1y,P2x,P2y),实际应用中的代码实例 transition: all 3.0s cubic-bezier(0.75, 0.25, 0.25, 0.75)。
可能你大多看到的是,ease,linear,ease-in-out 这样的属性值,其实它们也是贝塞尔曲线值,只不过是官方预定义的,以简化明了的名称,替代了复杂的数值书写方式。
以下是一些预定义名称对应的曲线值:
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)
可以x和y分开写动画,速度不一样,就形成曲率了@keyframes anix {
0% {top: 0}
100% {top: 200px}
}
@keyframes aniy {
0% {left: 0}
100% {left: 100px}
}
一、实现CSS3无限循环动画代码示例。
代码如下:
CSS:
@-webkit-keyframes gogogo {
0%{
-webkit-transform: rotate(0deg)
border:5px solid red
}
50%{
-webkit-transform: rotate(180deg)
background:black
border:5px solid yellow
}
100%{
-webkit-transform: rotate(360deg)
background:white
border:5px solid red
}
}
.loading{
border:5px solid black
border-radius:40px
width: 28px
height: 188px
-webkit-animation:gogogo 2s infinite linear
margin:100px
}
扩展资料实现动画无限循环所需要的CSS属性说明:
1、infinite
在animation后面加上infinite就可以无限循环,另外还可以做反向循环使用animation-direction
2、animation-name
规定需要绑定到选择器的 keyframe 名称。
3、animation-duration
规定完成动画所花费的时间,以秒或毫秒计。
4、animation-timing-function
规定动画的速度曲线。
5、animation-delay
规定在动画开始之前的延迟。
6、animation-iteration-count
规定动画应该播放的次数。
7、animation-direction
规定是否应该轮流反向播放动画。