一、动画的语法及开启

1.动画的语法

开启动画可以指定一个属性发生变化，例如大小，倾斜，位置等

2.动画的开启

a @keyframes 动画名称{

form{

动画开始时的状态

}

to{

动画结束时的状态

}

b @keyframes动画名称 {

0% {

margin-left: 0px;

}

100% {

margin-left: 500px;

}

例如这样：

第一种写法： @keyframes move {

from {

background-color: #bfa;

}

to {

background-color: red;

}

}

第二种写法：@keyframes move2 {

0% {

margin-left: 0px;

}

100% {

margin-left: 500px;

}

像这样就做好了一个动画效果，接下来要做的就是给需要这个动画效果的元素引入这个动画效果就可以了，引入的方式也非常简单，引入动画名称就可以了，具体怎么引入接下来也会有提到

二、动画的基本属性及属性值

1. animation-name：动画名称；

之前也提到了，给需要动画效果的元素引入动画的名称就可以了

例：animation-name：move；（当动画名称为move时）

2.animation-duration:时间;

执行动画的时间，单位也可以写秒也可以写毫秒

例：animation-duration:2s;或animation-duration:2000;

3.animation-timing-function: 属性值;

a ease 先快中间慢后快

b ease-in 先快后慢

c ease-out 先慢后快

d ease-in-out 先慢中间快后慢

e linear 匀速

f steps（）分步运动

例：animation-timing-function: ease-in-out;

4.animation-iteration-count: 数值;

意思是动画的执行次数

例：animation-iteration-count: 3或infinite（无限次）;

5.animation-delay: 秒或毫秒;

意思是动画的延迟时间

例：animation-delay: 2s/2000;

6.animation-direction: alternate;

意思是设置轮流反向播放动画位置

7.设置动画执行完毕后，停留的位置

animation-fill-mode: forwards;

三、用动画做出行走的小雪人

精灵图：

设置内容区的样式：div {width: 122px;height: 180px;background-color: pink;background-image: url(./111.jpeg);animation: xueren 1s steps(4) infinite;}@keyframes xueren {0% {background-position: 0px 0px;}100% {background-position: 487px 0px;}}
内容区：
<div></div>

如图所示：行走的小雪人也就做好了，这是图片所以小雪人不动，有兴趣的小伙伴可以尝试一下，很有意思的

动画二：动画（keyformes）相关推荐

XamarinAndroid组件教程设置自定义子元素动画(二)
XamarinAndroid组件教程设置自定义子元素动画(二) (9)打开MainActivity.cs文件,为RecylerView的子元素设置添加和删除时的透明动画效果.代码如下: --using ...
计算机动画可分为二维和三维动画,二维动画与三维动画设计的区分
二维动画与三维动画不仅仅只是名字不同,在制作过程中有很多的不同,我们一般只是充当欣赏动画的人,但我们必须了解相关的一些常识.三维动画现今已经进入影音行业,而且已经成为了主打军,一般我们看到的动画片都是 ...
少儿编程Scratch学习教程5--基本操作(二)动画例子
本篇介绍下动画相关例子 1.表情的转换首先创建一个精灵角色之后在外观选项中,选择"将造型切换为...",这样就可以在特定情况下就可以更换造型了添加一个事件,当按下" ...
SRPG游戏开发（十）第五章颜色映射与职业动画 - 二颜色组(Color Chart)
返回目录第五章颜色映射与职业动画二颜色组(Color Chart) 颜色组是保存许多颜色的一个容器,可以在Swapper中直接创建List<Color>或Color[] ...
二、动画- animation动画
文章目录 1.动画动画的定义以一个项目来开始了解他 2.动画的属性 1.动画动画的定义动画: - 动画和过渡类似,都是可以实现一些动态的效果: - 不同的是过渡需要在某个属性发生变化时才会触发 ...
【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )
文章目录 ◯.AnimatedBuilder 引入一.创建动画控制器二.创建动画三.创建动画作用的组件四.创建 AnimatedBuilder 关联动画与组件五.动画运行六.完整代码示例 ...
【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件 | 动画运行 )
文章目录 ◯.AnimatedWidget 组件引入一.创建 AnimatedWidget 动画组件二.创建动画控制器三.创建动画四.动画运行五.完整代码示例六.相关资源 Animated ...
【Flutter】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 )
文章目录一.创建动画控制器二.创建动画三.设置值监听器四.设置状态监听器五.布局中使用动画值六.动画运行七.完整代码示例八.相关资源 Flutter 动画基本流程 : ① 创建动画控制 ...
【Flutter】Animation 动画 ( Flutter 动画的核心类 | Animation | CurvedAnimation | AnimationController | Tween )
文章目录一.动画的核心类 Animation 二.动画的核心类 CurvedAnimation 三.动画的核心类 AnimationController 四.动画的核心类 Tween 五.相关资源 ...
【Flutter】Animation 动画 ( Flutter 动画类型 | Flutter 动画的核心类 )
文章目录一.Flutter 动画类型二.Flutter 动画的核心类三.相关资源 Flutter Animation 动画 : Flutter 动画类型为 Widget 组件添加动画为动画添 ...

动画二：动画（keyformes）