1.动画

动画的定义

动画：
- 动画和过渡类似，都是可以实现一些动态的效果；
- 不同的是过渡需要在某个属性发生变化时才会触发；
- 动画可以自动触发动态效果；
- 设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤；

以一个项目来开始了解他

准备工作：当鼠标移入到box1内， box1下的box2进行margin-left位移, 通过过渡动画，让他在2s内缓慢移动。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}.box1 {width: 800px;height: 800px;background-color: silver;/* 开启bfc,防止重叠,无法正常的进行margin-top */overflow: hidden;}.box1 div {width: 100px;height: 100px;margin-bottom: 100px;/* box1下的box2刚开始是0 */margin-left: 0;}.box2 {background-color: #bfa;transition:2s;}/*当鼠标移入到box1内， box1下的box2进行位移到700px */.box1:hover div{margin-left: 700px;}</style></head><body><div class="box1"><div class="box2"></div></div></body>
</html>

transition 要发生过渡效果，一定是需要属性样式发生变化的时候才执行。且需要用户去触发了某个行为，比如这里的鼠标移动到box1上。
但是我现在想，一进入页面，动画效果就立即执行，播放动画，不需要用户去触发。这个时候就需要我们的Animation 动画来做。

开始使用animation做动画效果。

先在style 里面，设置关键帧动画。需求：让box2从margin-left:0 移动到 margin-left:700px;

   @keyframes test{/* from表示动画的开始位置 也可以使用 0% */from{margin-left: 0;}/* to动画的结束位置 也可以使用100%*/to{margin-left:700px;}}

现在我们要让box2生效这个动画，只需要在box2中使用即可。
注意：要想box2动画生效，要在这里使用，置了名字后，如果没有设置动画执行时间，也是看不到动画效果的。

  .box2 {background-color: #bfa;/* animation-name: 要对当前元素生效的关键帧的名字 */animation-name: test;/* animation-duration: 动画的执行时间 */animation-duration: 2s;}

此时我们完成的代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}.box1 {width: 800px;height: 800px;background-color: silver;/* 开启bfc,防止重叠,无法正常的进行margin-top */overflow: hidden;}.box1 div {width: 100px;height: 100px;margin-bottom: 100px;margin-left: 0;}.box2 {background-color: #bfa;/* animation-name: 要对当前元素生效的关键帧的名字 */animation-name: test;/* animation-duration: 动画的执行时间 */animation-duration: 2s;}/*当鼠标移入到box1内， box1下的box2进行位移到700px */.box1:hover div{margin-left: 700px;}@keyframes test{/* from表示动画的开始位置 也可以使用 0% */from{margin-left: 0;}/* to动画的结束位置 也可以使用100%*/to{margin-left:700px;}}</style></head><body><div class="box1"><div class="box2"></div></div></body>
</html>

2.动画的属性

 .box2 {background-color: #bfa;/* animation-name: 要对当前元素生效的关键帧的名字 *//* animation-name: test; *//* animation-duration: 动画的执行时间 *//* animation-duration: 2s; *//* 动画延迟1s后才执行 *//* animation-delay: 1s; *//* 动画先加速后减速的运动 *//* animation-timing-function: ease-in-out; *//* animation-iteration-count 动画执行的次数 可选值：次数infinite 无限执行*//* animation-iteration-count: 1; *//*animation-direction指定动画运行的方向可选值：normal 默认值  从 from 向 to运行 每次都是这样 reverse 从 to 向 from 运行 每次都是这样 alternate 从 from 向 to运行 重复执行动画时反向执行alternate-reverse 从 to 向 from运行 重复执行动画时反向执行*//* animation-direction: alternate-reverse; *//* animation-play-state: 设置动画的执行状态 可选值：running 默认值 动画执行paused 动画暂停*//* animation-play-state: paused; *//* 动画的填充模式none:默认值 动画执行完毕元素回到原来的位置forwards:动画执行完毕会停止在动画结束的位置backwards:动画延时等待时，元素就会处于开始from 的位置，即这里的margin-left=0both: 结合了forwards 和backwards*//* animation-fill-mode: both; *//* 综上:可以通过一个属性，直接把大家都设置了2s:动画执行的时间2：执行两次1s：延迟1s执行alternate：去的时候是从前往后，然后在从后往前回来*/animation:test 2s 2 1s alternate;}

二、动画- animation动画相关推荐

ae制h5文字动画_H5案例分享：CSS3 Animation动画
CSS3 Animation动画一.@keyframes CSS3中的Animation动画主要的组件是@keyframes,@keyframes这个规则是用来创建动画的.将@keyframes当作 ...
html animation 属性,CSS3动画属性：动画(animation)
一:动画(animation)的参数详解由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗 ...
动画-Animation/@keyframes
动画的使用流程有两步,分为定义动画和使用动画,定义动画相当于制作动画,有两种制作方法,一个是 from{}···to{}:另一个是百分比.制作完动画之后,再在需要的地方通过 animation 来使用 ...
CSS3动画 animation
CSS3动画 animation 动画是使元素从一种样式逐渐变化为另一种样式的效果, 可以改变任意多的样式任意多的次数.请用百分比来规定变化发生的时间,或用关键词 "from" 和 ...
04_动画 animation
过渡 vs 动画过渡:用于两个状态变化过程动画:实现多个状态间的变化过程,动画过程可控动画动画的本质:快速切换大量图片时在人脑中行成的具有连续性的画面构成动画的最小单元:帧或动画帧实现步骤 ...
CSS3 Animation动画的十二原则
[本文系外部转贴,原文地址:https://cssanimation.rocks/principles/] 编者注:鉴于KM不能插入iframe直接演示效果,只能给链接跳转页面看代码了:(Animat ...
Android开发--图形图像与动画（二）--Animation实现图像的渐变、缩放、位移、旋转
Android 平台提供了两类动画. 一类是Tween动画,就是对场景里的对象不断的进行图像变化来产生动画效果(旋转.平移.放缩和渐变). 下面就讲一下Tweene Animations. 主要类: ...
Android开发--图形图像与动画（二）--Animation实现图像的渐变缩放位移旋转
Android 平台提供了两类动画. 一类是Tween动画,就是对场景里的对象不断的进行图像变化来产生动画效果(旋转.平移.放缩和渐变). 下面就讲一下Tweene Animations. 主要类: ...
十四、CSS 3新特性详解（二）——2D转换（transform）、动画(animation)、动画序列
HTML5 第二天一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transfor ...

二、动画- animation动画

文章目录

1.动画

动画的定义

以一个项目来开始了解他

2.动画的属性

二、动画- animation动画相关推荐

最新文章

热门文章