一、@keyframes定义动画
通过 @keyframes 规则，您能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。
提示：为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
提示：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
CSS 语法：
@keyframes animationname {keyframes-selector {css-styles;}}
例子：
使 div 元素匀速向下移动：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
动画如下：
例2
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
效果如下：
例3：在一个动画中改变多个 CSS 样式：
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}
@keyframes mymove
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
效果：
例4：带有多个 CSS 样式的多个 keyframe 选择器：
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
效果：
例5：微信小程序中的动画
wxml
<view class="daily_work">
<view class="daily_work_title">日常工作</view>
<view class="scroll_ul" wx:if="{{list1 && list1.length > 0}}">
<text wx:for="{{list1}}">{{item}}</text>
</view>
</view>
wxss
.daily_work{
margin: 200rpx 20rpx 20rpx 20rpx;
width: 710rpx;
background-color: #EDF1F9;
border-radius: 6px;
position: fixed;
height: 100px;
overflow: hidden;
}
.daily_work .daily_work_title{
margin: 20rpx 0 20rpx 20rpx;
font-weight: bolder;
}
.daily_work .scroll_ul {
padding:5px 0;
white-space: nowrap;/*禁止换行*/
animation: mymove 10s linear infinite; /* 滚动动画 */
}
.daily_work .scroll_ul text {
display:inline-block;
margin-right:10px;
height: 40px;
line-height: 40px;
font-size: 28rpx;
padding:0 6px;
border-radius: 6px;
background-color: #CDD9EE;
color: #4E79C2;
}
@keyframes mymove {
100% {
transform: translateX(-500px); // 到100%时向左移动500px
}
}
js：
data: {
list1: ["起床","扫地","拖地","晾衣服","吃早餐","骑车去上班","上班","吃中餐","上班","骑车回家","吃晚餐","带娃","洗澡","睡觉"]
},
效果：
二、animation设置动画属性
1、animation定义和用法
animation 属性是一个简写属性，用于设置六个动画属性：
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
实例
使用简写属性，将动画与 div 元素绑定：
div
{
animation:mymove 5s infinite;
}
CSS 语法
animation: name duration timing-function delay iteration-count direction;
默认值：none 0 ease 0 1 normal
2、animation-timing-function的CSS语法：
animation-timing-function: value;
animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：
linear表示匀速
3、animation-timing-function的CSS语法：
animation-iteration-count: n|infinite;
infinite表示无限次播放动画
4、animation-duration
animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。
css语法：
animation-duration: time;
标签：动画,top,keyframes,animation,5s,infinite,mymove,CSS From： https://www.cnblogs.com/zwh0910/p/17770342.html