526互联

CSS:@keyframes和animation

发布时间 2023-10-17 18:24:40作者: 周文豪

一、@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-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;