动画、过渡

2024-01-06 13:50:04

一、动画

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

1、基本使用

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

①用keyframes定义动画

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

动画序列

②元素使用动画

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-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（可以省略）
谁做过渡就给谁加

码农公寓