微信小程序动画课程-通过wxss(css)来实现-animation-timing-function属性

animation-timing-function属性

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua

定义和用法
animation-timing-function 规定动画的速度曲线，默认是 “ease”
速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
速度曲线用于使变化更为平滑。
默认值： ease
继承性： no
版本： CSS3
JavaScript 语法： object.style.animationTimingFunction=“linear”
语法

animation-timing-function: value;

animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：

值 描述
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

小程序应用

Wxml代码

linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
01
02

Wxss代码

.c01{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
animation-timing-function:linear;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}


.c02{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove2 5s infinite;
animation-timing-function: ease;
}
@keyframes mymove2
{
from {left:0px;}
to {left:200px;}
}

效果图

欢迎大家收看我的视频课程：微信小程序动画课程-通过wxss(css)来实现