动画、过渡

一、动画

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

1、基本使用

制作动画分为两步：先定义动画，再使用（调用动画）

①用keyframes定义动画

@keyframes 动画名称 {
   0% {
          width：100px;
   }
   100% {
          width: 200px;
   }
}

动画序列

• 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
• 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改变为新样式的动画效果
• 动画是使元素从一种样式逐渐转变为另一种样式的效果，可以改变任意多的样式任意多的次数
• 请用百分比来规定变化发生的时间，或用关键词“from”和"to"，等同于0%和100%

②元素使用动画

div {
         /*调用动画*/
         animation-name:动画名称;
         /*持续时间*/
         animation-duration:持续时间;
}

 2、动画常见属性

①

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称（必需）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0（必需）
animation-timing-function	规定动画的速度曲线，默认是“ease”
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite（无限循环）
animation-direction	规定动画是否在下一周期逆向播放，默认是“normal”，alternate逆播放
animation-play-state	规定动画是否正在运行或暂停，默认是“running”还有“pause”
animation-fill-mode	规定动画结束后状态，保持forwards 回到起始backwards

②简写：

animation：动画名称 持续时间 动画曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

• 简写属性里面不包括animation-play-state
• 暂停动画：animation-play-state：puased；经常和鼠标经过等其他配合使用
• 想要动画走回来，而不是直接跳回来：animation-direction：alternate 

③详解速度曲线

animation-timing-function指定动画将如何完成一个周期。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。

值	描述
linear	动画从头到尾的速度是相同的，匀速
ease	默认。动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
steps(int,start|end)	指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。 第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下： start：表示直接开始。 end：默认值，表示戛然而止。

注:我们一个元素可以添加多个动画，用逗号隔开（效果类似于一只狗可以先添加动画跑到屏幕中间，然后再添加动画一直在原地跑）

二、过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。（经常和：hover一起搭配使用）

1、语法：

transition：要过渡的属性   花费时间  运动曲线  何时开始

• 属性：想要变化的CSS属性，比如宽度高度、背景颜色 、内外边距都可以。如果想要写多个属性，利用逗号进行分割；如果想要所有的属性都变化过渡，写一个all就可以
• 花费时间：单位是秒（必须写单位）
• 运动曲线：默认是ease（可以省略）
• 何时开始：单位是秒（必须写单位）可以设置延迟触发时间 ，默认是0s（可以省略）
• 谁做过渡就给谁加

标签：动画,样式,ease,默认,animation,过渡,属性
来源： https://blog.csdn.net/wx_tracy/article/details/122734277