CSS动画效果属性整理笔记（transition、animation）

最新推荐文章于 2023-10-30 09:34:17 发布

boyMiSen

最新推荐文章于 2023-10-30 09:34:17 发布

阅读量261

点赞数

分类专栏：前端学习 css学习文章标签： CSS transition animation

本文链接：https://blog.csdn.net/misenlmx/article/details/101023753

版权

前端学习同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

css学习

1 篇文章 0 订阅

订阅专栏

所有内容写在代码里，直接copy生成html文件可使用效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css动画</title>
</head>
<body>
  <div class="testTransition">
    这是transition
  </div>
  <div class="testAnimation">
    这是animation
  </div>
</body>
</html>

<style>
  .testTransition {
    width: 100px;
    height: 300px;
    background-color: aqua;
    transition-property: width,background-color;
    transition: 2s ease-in-out;
  }
  .testTransition:hover {
    width: 300px;
    background-color: brown;
  }
  .testAnimation {
    width: 100px;
    height: 300px;
    background-color: red;
    animation: test 3s ease-in-out 1s infinite alternate running
  }
  @keyframes test {
    20% {
      width: 150px;
      height: 200px;
      background-color: slateblue;
    }
    60% {
      width: 300px;
      height: 100px;
      background-color: bisque;
    }
    100% {
      width: 200px;
      height: 200px;
      background-color: coral;
    }
  }

</style>

<!-- 
  transition（过渡）                                                       用于设置元素的样式过度
  |___语法：transition: property duration timing-function delay;           合并简写，空格隔开
  |___transition-property：transform;
      ...                                                                 拆分写法，属性前加transition-
      |___property                                                        规定设置过渡效果的 CSS 属性的名称
          |___例如：transform
      |___duration                                                        规定完成过渡效果需要多少秒或毫秒，默认0
      |___timing-function                                                 规定速度效果的速度曲线
          |___ease(默认值):                                                先快再快再慢
          |___ease-in:                                                    淡入(动画刚开始的时候变化慢)
          |___ease-out:                                                   淡出(动画快结束的时候变化慢)
          |___ease-in-out:                                                淡入淡出
          |___linear:                                                     匀速变化
          |___cubic-bezier(少用):                                         贝塞尔曲线,所有的变化都可以用贝塞 尔曲线来代替 cubic-bezier(x1,y1,x2,y2),x1,y1,x2,y2值的范围都是0~1
      |___delay                                                           定义过渡效果何时开始1s，不写默认0,一定是s单位，0s
      <设置需要变化的css属性名，然后规定整个动画时间，动画曲线，以及延迟几秒后开始>

  animation(动画)                                                         用于设置动画属性,transition的进阶,包含6个属性
  |___语法：animation: name duration timing-function delay iteration-count direction play-state fill-mode;
  |___...                                                                合并写法，空格隔开，也可拆分，属性前加animation-
      |___name                                                           调用@keyframes定义好的动画，与其动画名称一致
          |___例如：@keyframes box {          // 这个box就是name名
            // 阶段性变化
            10% {                            // 在变化时间的10%之前，是red
              color: red;
            }
            50% {                            // 在变化时间的10%~50%，是yellow
              color: yellow;
            }
            100% {                           // 在变化时间的50%~100%，是blue
              color: blue
            }
            ...
          }
      |___duration                                                      播放动画持续的总时间
      |___timing-function                                               规定速度效果的曲线，属性值同transition一样
      |___delay                                                         开始等待的时间，即延迟几秒开始1s
      |___interation-count                                              动画循环次数，默认值1，具体数字或者infinite（无限次播放）
      |___direction                                                     设置播放方向：normal(按时间轴顺序),reverse(时间轴反方向运行),alternate(轮流，即来回往复进行),alternate-reverse(动画先反运行再正方向运行，并持续交替运行)
      |___play-state                                                    控制动画的暂停和继续，running(继续)，paused(暂停)
      |___fill-mode                                                     控制动画结束后停留状态，属性如下
          |___none                                                      回到动画没开始时的状态
          |___forwards                                                  动画结束后动画停留在结束状态
          |___backwords                                                 动画回到第一帧的状态
          |___both                                                      根据animation-direction轮流应用forwards和backwards规则，注意与iteration-count不要冲突(动画执行无限次)

  transform（变形）                                                      元素的旋转、缩放、移动等等，和动画没什么关系，只是原来配合过渡
  |___语法：transform: none|transform-functions(可多个值，空格隔开)
  |___例如：transform: rotate(180deg) scale(.5, .5);
      |___所有属性值：
      |___none	                                                        定义不进行转换。
      |___matrix(n,n,n,n,n,n)	                                          定义 2D 转换，使用六个值的矩阵。
      |___matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	                    定义 3D 转换，使用 16 个值的 4x4 矩阵。	
      |___translate(x,y)	                                              定义 2D 转换。
      |___translate3d(x,y,z)	                                          定义 3D 转换。	
      |___translateX(x)	                                                定义转换，只是用 X 轴的值。
      |___translateY(y)	                                                定义转换，只是用 Y 轴的值。
      |___translateZ(z)	                                                定义 3D 转换，只是用 Z 轴的值。	
      |___scale(x,y)	                                                  定义 2D 缩放转换。
      |___scale3d(x,y,z)	                                              定义 3D 缩放转换。	
      |___scaleX(x)	                                                    通过设置 X 轴的值来定义缩放转换。
      |___scaleY(y)	                                                    通过设置 Y 轴的值来定义缩放转换。
      |___scaleZ(z)	                                                    通过设置 Z 轴的值来定义 3D 缩放转换。	
      |___rotate(angle)	                                                定义 2D 旋转，在参数中规定角度。
      |___rotate3d(x,y,z,angle)	                                        定义 3D 旋转。	
      |___rotateX(angle)	                                              定义沿着 X 轴的 3D 旋转。
      |___rotateY(angle)	                                              定义沿着 Y 轴的 3D 旋转。
      |___rotateZ(angle)	                                              定义沿着 Z 轴的 3D 旋转。
      |___skew(x-angle,y-angle)	                                        定义沿着 X 和 Y 轴的 2D 倾斜转换。
      |___skewX(angle)	                                                定义沿着 X 轴的 2D 倾斜转换。
      |___skewY(angle)	                                                定义沿着 Y 轴的 2D 倾斜转换。
      |___perspective(n)	                                              为 3D 转换元素定义透视视图。

 -->

动画效果学习，备忘。

boyMiSen

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS动画效果属性整理笔记（transition、animation）

所有内容写在代码里，直接copy生成html文件可使用效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
复制链接

扫一扫