惊讶！！！CSS3 关键帧动画——animation与@keyframes竟然是这样使用

最新推荐文章于 2024-05-13 14:34:46 发布

Fancy_夏沫

最新推荐文章于 2024-05-13 14:34:46 发布

阅读量794

点赞数

文章标签： css3 javascript

本文链接：https://blog.csdn.net/fancy_vae/article/details/109151454

版权

在设计动画效果时，关键帧动画是一个很重要的功能，它设置了一段连续的动画。

1.关键帧动画（@keyframes）

@keyframes语法：@keyframes <animation-name>: {<keyframes-selector>{<CSS-styles>}}

其取值说明如下：

<animation-name>:动画的名称。必须定义一个动画的名称，方便与动画属性animation绑定。

<keyframes-selector>:动画持续时间的百分比，也可以是from和to。from对应的是0%，to对应的是100%，建议使用百分比。

<CSS-styles>:设置一个或多个合法的样式属性。要实现动画，必须设置样式属性。

注：使用动画属性来控制动画的实现，其中关键帧动画是通过名称与动画绑定的。

2.动画的实现（animation属性）

animation属性，是专门用于动画设计的，它能把一个或多个关键帧动画绑定到元素上，以实现更加

复杂的动画。

animation属性是一个复合属性，包含6个子属性：
animation-name、animation-duration、animation-timing、animation-delay、animation-iteration-count、animation-direction；

对于子属性，可在其前面加上不同的前缀，以适应不同内核的浏览器。

animation语法：animation：<name> <duration> <timing-function> <delay> <iteration-count> <direction>；

其取值说明如下：

<name> :定义动画的名称，绑定指定的关键帧动画。其语法为：animation-name:

<keyframename>：none;

none是默认值，表示没有动画；<keyframename>指定动画名称，即指定名称对应的动画关键帧。

<duration>:定义动画播放的周期时间。其语法为：animation-duration：<time>;

<time>用于指定播放动画的时间长度，单位为秒(s)或毫秒(ms)

<timing-function>:定义动画的播放方式。其语法如下：

其具体的动画播放的属性值，可参考transition-timing-function中的属性值。

<delay>:定义动画的延迟时间。语法为：animation-delay:<time>;

<time>表示时间，单位为秒(s)或毫秒(ms)

<iteration-count> 定义动画应该播放的次数。语法为：animation-iteration：infinite|<n>;

infinite表示无限次的播放动画；<n>表示动画播放的次数，默认值为1，表示只播放一次。

<direction>:定义动画播放的顺序方向。语法为：animation-direction：normal|alternate；

normal表示按照关键帧设定的动画方向播放；alternate表示动画的播放方向与上一播放周期相反，第一周期的

播放方向还是正常的播放方向。

补充
animation-name 剧本名
animation-duration: 动画持续时间
animation-delay: 动画延迟时间
animation-timing-function: 运动曲线
animation-iteration-count: 动画执行次数
animation-fill-mode: 是否保持最终状态

none 不改变默认行为。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在animation-delay 所指的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both 向前和向后填充模式都被应用。

animation-direction: 复原时时否也使用动画
animation-play-state: 暂停还是播放状态

小案例

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>帧动画(animation)属性</title>
	<style>
	
	  @keyframes myanimation { /* 开始创建动画帧 */
	    % {
		  width: 100px;
		  background-color: red;
		}
		20% {
		  width: 160px;
		  background-color: blue;
		}
		40% {
		  width: 220px;
		  background-color: blue;
		}
		60% {
		  width: 280px;
		  background-color: yellow;
		}
		80% {
		  width: 340px;
		  background-color: yellow;
		}
		100% {
		  width: 400px;
		  background-color: orange;
		}
	  }
	  
	  div {
	    width: 100px;
		height: 100px;
		background-color: red;
		
		/* 设置帧动画效果 */
		
		-webkit-animation-name: myanimation;
		-webkit-animation-duration: 5s;
		-webkit-animation-timing-function: linear;
		-webkit-animation-delay: .5s;
		-webkit-animation-iteration-count: infinite; /* 设置动画的播放次数 */
		/*-webkit-animation-direction: reverse; 动画是否反向播放 */
		-webkit-animation-state: runing; /* 指定动画是否正在播放或暂停 */
		
		animation-name: myanimation;
		animation-duration: 5s;
		animation-timing-function: linear;
		animation-delay: .5s;
		animation-iteration-count: infinite;
		/*animation-direction: reverse; 动画是否反向播放 */
		animation-state: runing;
	  }
	
	</style>
  </head>
  <body>
    
    <div><div>
	 
  </body>
</html>

在这里插入图片描述

Fancy_夏沫

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
惊讶！！！CSS3 关键帧动画——animation与@keyframes竟然是这样使用

在设计动画效果时，关键帧动画是一个很重要的功能，它设置了一段连续的动画。1.关键帧动画（@keyframes）@keyframes语法：@keyframes <animation-name>: {<keyframes-selector>{<CSS-styles>}}其取值说明如下：<animation-name>:动画的名称。必须定义一个动画的名称，方便与动画属性animation绑定。<keyframes-selector>:动画持续时
复制链接

扫一扫