CSS3动画

最新推荐文章于 2024-07-24 20:47:06 发布

是六月

最新推荐文章于 2024-07-24 20:47:06 发布

阅读量130

点赞数

分类专栏：前端CSS3 文章标签： css3

本文链接：https://blog.csdn.net/weixin_45929716/article/details/105134533

版权

前端CSS3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

欢迎访问的我的个人博客http://liubofeng.com/

一、CSS3 animation

1、animation-name属性

功能：检索或设置对象所应用的动画名称

语法：

animation-name:keyframename

参数说明：

keyframename:指定要绑定到选择器的关键帧的名称。

2、animation-timing-function属性

功能：检索或设置对象动画的过渡类型。

语法：

animation-timing-function:ease|linear|......

animation-timing-function属性值	说明
linear	线性过渡。等同于贝塞尔曲线（0.0，0.0，1.0，1.0）
ease	平滑过渡。等同于贝塞尔曲线（0.25，0.1，0.25，1.0）
ease-in	由慢到快。等同于贝塞尔曲线（0.42，0，1.0，1.0）
ease-out	由快到慢。等同于贝塞尔曲线（0，0，0.58，1.0）
ease-in-out	由慢到快再到慢。等同于贝塞尔曲线（0.42，0，0.58，1.0
step-start	等同于steps（1，start）
step-end	等同于steps（1，end)
steps([,[start/end]]?)	接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(,,,	特定的贝塞尔曲线类型，4个数值需要在[0,1]区间内

3、animation-delay属性

功能：检索或设置对象动画的延迟时间。

语法：

animation-delay:time;

参数说明：
可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0。

4、animation-iteration-count属性

功能：检索或设置对象动画的循环次数。

语法：

animation-iteration-count:infinite|number;

参数说明：
number为数字，默认为1；infinite为无限次数循环。

5、animation-direction属性

功能：检索或设置对象动画在循环中是否反向运动。

语法：

animation-direction:normal|reverse|alternate|

参数说明：

参数	说明
normal	正常方向
reverse	反方向运行
alternate	动画现正常运行再反方向运行，并持续交替运行
alternate-reverse	动画先反方向运行，再正向运行，并持续交替运行

6、animation-fill-mode属性

功能：规定当动画不播放时（当动画完成或当动画有延迟未开始播放时），要应用到的元素样式。

语法：

animation-fill-mode:none|forwards|backwards|both;

参数说明：

参数	说明
none	默认值。不设置对象动画之外的状态
forwards	设置对象状态为动画结束时的状态
backwards	设置对象状态为动画开始时的状态
both	设置对象状态为动画结束或开始的状态

7、animation-play-state属性

功能：指定动画是否在正常运行或已暂停。

语法：

animation-play-state:paused|running;

参数说明：

paused:指定暂停动画。
running：默认值，指定正在运行的动画。

8、animation复合属性

语法：

animation:name duration timing-function- delay iteration-count direction fill-mode play-state;

二、CSS3 @keyframes

1、keyframes定义

关键帧，可以指定任何顺序排列来决定animation动画变化的关键位置。

使用说明：
使用@keyframes规则创建动画，通过逐步改变从一个css样式设定到另一个。
在动画过程中可以通过@keyfrmes规则多次更改css样式的设定。

语法：

@keyframes animationname{
	from{CSS样式}//动画开始的样式
	to{CSS样式}//动画结束的样式

编程练习：
完成一个旋转的太极图。
效果如下图所示：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>太极图</title>
  <style type="text/css">
   div{position: absolute;
   top: 0;right: 0;bottom: 0;left: 0;
   box-sizing: border-box;
   width: 400px;
   height: 400px;
   margin: auto;
   border: 1px solid red;
   border-bottom: 200px solid red;
   border-radius: 50%;
   transform-origin: 50% 50%;
   animation-name: rotate;
   animation-duration: 5s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
   }
   div:before{content: "";float: left;width: 40px;height: 40px;border: 80px solid red;background-color: white;
   margin-top: 100px; border-radius: 50%;}
   div:after{content: "";float: right;width: 40px;height: 40px;border: 80px solid white;background-color: red;
   margin-top: -200px; border-radius: 50%;}
   @keyframes rotate{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
   }
  </style>
 </head>
 <body>
  <div></div>
 </body>
</html>

是六月

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画

一、CSS3 animation1、animation-name属性检索或设置对象所应用的动画名称语法：animation-name:keyframename参数说明：keyframename:指定要绑定到选择器的关键帧的名称。2、animation-timing-function属性检索或设置对象动画的过渡类型。语法：animation-timing-function:...
复制链接

扫一扫

专栏目录