CSS笔记——触发式动画Transition、主动式动画Animation、Transfrom 动画、CSS 3D 动画、阴影和滤镜样式

CSS动画

一、触发式动画Transition

transition过渡动画，一般配合伪类使用

属性值：

1. transition-duration：

   指定过渡效果的持续时间，以秒或毫秒为单位。

2. transition-timing-function：

   指定过渡效果的时间函数，即控制过渡速度的函数。常用的值有 ease、linear、ease-in、ease-out、ease-in-out 等。

3. transition-delay：指定过渡效果延迟的时间，以秒或毫秒为单位。

4. transition-property：指定要过渡的 CSS 属性。可以指定一个或多个属性

举个例子，

.box {
   
  width: 100px;
  height: 100px;
  background-color: red;
  transition-property: background-color;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
    /* 复合属性*/
    transition: 属性名,过渡时间,时间函数,延迟时间;
}

.box:hover {
   
  background-color: blue;
}

transition 属性只能应用于一些可以被数值化的 CSS 属性，例如 width、height、background-color 等。像 display、visibility 等不能被过渡的属性就无法使用 transition 属性来实现动画效果。

此外，transition 属性也可以与其他 CSS 动画属性（如 animation）组合使用，以实现更加复杂的动画效果。

二、主动式动画Animation

CSS的 Animation 属性可以实现比 transition 更加复杂、多样化的动画效果。
animation 属性需要指定一个动画名称，以及一系列动画选项，包括动画的持续时间、时间函数、延迟时间、重复次数、播放方向等。

animation ：动画名（name) ，持续时间(duration)，延迟时间(delay），动画速率（step（5），运动次数（默认一次，可选n/infinte)**

具体来说，animation 属性有以下几个值：

1. animation-name：指定动画的名称，通常需要与 @keyframes 规则配合使用。@keyframes 规则用于定义动画的关键帧，即动画从开始到结束的过程中的关键状态。可以通过指定关键帧的百分比或关键字来定义不同的状态。例如：

/*定义函数*/
@keyframes move {
   
  from {
   
      left: 0;
    }
  to {
   
      left: 100px;
    }