devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

css动画详解

作者：繁依Fanyi0 | 2024-03-18 23:56:29

赞

踩

css动画

目录

一、什么是css动画？

二、过渡

1.过渡的理解

2.过渡的4个属性

1、transition-property

2、transition-duration

3、 transition-timingfunction

4、transition-delay

5、transition

三、动画

1.动画的理解

2.动画属性  

1、animation-name

2、animation-duration

3、animation-delay

4、animation-iterationcount

5、animation-direction

6、animation-fill-mode

7、animation-play-state

8、animation

四、变形2D

1、变形的理解

2、位移 transform:translate();

 3、旋转 transform: rotate(); 

 4、缩放 transform:scale();

5、倾斜 transform:skew()

6、 变形原点 transform-origin

变形3D

1.⽗元素样式：

2 位移 :translate3d translateX translateY translateZ

3:旋转:rotate3d rotateX rotateY rotateZ

4:缩放：scale3d scaleX scaleY scaleZ

小练习

1、过渡

2、过渡变化曲线 

3、米兔练习

4、行走的小雪人

5、西游记动画

一、什么是css动画？

1、使⽤css技术来控制⻚⾯元素 css属性 的变化。
2、css动画优势：不需要⽤js也能写，⽐较流畅，由浏览器去执⾏动画，减少代码量，性能⽐较⾼
3、⼀般兼容到ie10以上浏览器（⼀般没太⼤问题）

二、过渡

1.过渡的理解

过渡（transition）[træn'siʒǝn]
       -通过过渡可以指定⼀个属性发⽣变化时的切换⽅式，平滑的过渡
       -需要在某种条件下触发，例如hover、active、focus情况下
        -⼀次性的效果，不能循环，只能做简单的动画
        -只有两帧，设置动画初始值和结束值
        -IE10开始兼容，移动端兼容良好

2.过渡的4个属性

1、transition-property

哪些属性要过渡（选 填）

  • none 没有属性获得过 渡效果
  • all 所有属性都参与过 渡 默认值
  • property ⾃定义应⽤ 过渡效果，⼀个或多 个，⽤空格隔开
注意：
1、所有 数值类型 的属 性，都可以参与过渡， ⽐如width、height、 left、top、border，radius、opacity等
2、从⼀个有效数值 向另⼀个有效数值进⾏ 过渡
2、transition-duration

指定过渡效果的持续时 间（必填）

时间的单位：s和ms ，1s=1000ms
3、 transition-timingfunction

过渡变化曲线（缓动效 果）（选填）

  • ease [i:z] 默认值，慢速开始，先加速，然后 再减速
  • linear 匀速运动 ease-in 先慢后快 加 速运动 ,ease-out 先快后慢 减 速运动 ,ease-in-out 以慢速开 始和结束的过渡效果
  • steps()分布执⾏过渡 效果
  • cubic-bezier(n,n,n,n) ⽴⽅⻉塞尔曲线函数， 值是0-1之间的数值
4、transition-delay
过渡效果的延迟，等待 ⼀段时间后执⾏过渡 （选填）
时间的单位：s和ms ,1s=1000ms
5、transition
同时设置过渡相关的所 有属性 （选填，过渡时间 是必写）
只有⼀个要求，如果要 写延迟， 则两个时间中,第⼀ 个写过渡时间，第⼆个 写延迟时间.

三、动画

1.动画的理解

动画和过渡类似，都是可以实现⼀些动态效果，不同的是过渡需要在某个属性发⽣变化时才能触发， 例如hover，acitve时，动画可以⾃动触发动画.
第⼀步：先要设置⼀个关键帧，关键帧设置了动画每⼀个步骤
制定关键帧⽤的是@keyframes属性，指定关键帧主要有两种⽅法：
⽅法⼀：
@keyframes 关键帧名称{
from{初始状态属性}
to{结束状态属性}}
⽅法⼆：
@keyframes 关键帧名称{
0%{初始状态属性}
50%（中间还可以再添加关键帧）
100%{结束状态属性}
注意：
1、帧的顺序可以更改，不关顺序问题。如果初始帧不写，默认是原始设置，如果结束帧不写， 默认也是原始设置
2、可以同时设置关键帧，⽤逗号（,）隔开就⾏ 
  1.  @keyframes text {
  2. 2 /* from表示动画开始位置 也可以使⽤0%*/
  3. 3 from {
  4. 4 margin-left: 0;
  5. 5 }
  6. 6 /* to动画的结束位置 也可以使⽤100%*/
  7. 7 to {
  8. 8 margin-left: 500px;
  9. 9 }

第⼆步 调⽤关键帧

2.动画属性  

1、animation-name
绑定到选择器的关键帧 的名称，告诉系统需要 执⾏哪个动画 (必填)
2、animation-duration
动画的完成时间，告诉 系统动画持续的时长 （必填）
animation-timingfunction
设置动画如何完成一个 周期，告诉系统动画执 行的速度（与过度动画 类型）
3、animation-delay
动画在启动前的延迟间 隔
4、animation-iterationcount
动画的播放次数，告诉 系统动画需要执行几次
5、animation-direction
指定是否应给轮流反向 播放动画
6、animation-fill-mode
规定当动画不播放时 （完成时，延时未开始 播放时），应用到的元 素样式
7、animation-play-state
告诉系统当前动画是否 需要暂停
8、animation
简写，可以写以上任意 属性的可选值
animation: 关键帧的名 称 动画持续的时间 运 动状态(linear( 匀速 )) 动 画延迟的时间 动画的循环次数 动画的运动⽅式 ( 设置正向或者反向 )

四、变形2D

1、变形的理解

变形属性 transform ：
  • 变形不会影响到⻚⾯的布局(只折腾⾃⼰)
  • 尽量变形写在⼀个transform⾥，不然下⾯再写⼀个，就会覆盖上⾯
  • 可选值：
    位移 —translate()
    缩放 —scale()
    旋转 —rotate()
    倾斜 —skew()

2、位移 transform:translate();

    translate( 参数1，参数2 ) 参数 值 1 是指在 x 轴上移动的距离 , 正值，元素向右移动，负值向左移 动，参 数2 是指在 y 轴上移动的距离，正值向下，负值向上，参数 2 默认为 0
        translateX()沿着x轴⽅向平移
        translateY()沿着y轴⽅向平移
       translateZ()沿着z轴⽅向平移 结合视距起作⽤. 不能是百分⽐数值（ 3d 变化）
注意：
1、平移元素，可以是数字，可以是百分⽐，百分⽐是相对于 ⾃身计算 的, x 轴往右为正， y 轴往下为正，反之 为负
2 、位移的参考原点是元素的原来所处的位置
3 、如果是通过 active 进⾏位移，执⾏完毕后会还原
4 、 不会影响别的元素
5 、对于⾏内元素是没有效果的 
  1.  //垂直⽔平居中的效果
  2.  position: absolute;
  3.  left: 50%;
  4.  top: 50%;
  5.  transform: translate(-50%, -50%);
  6.  transform: translateX(-50%) translateY(-50%);

 3、旋转 transform: rotate(); 

  •  默认情况下是绕着中⼼点进⾏转动的；
  •  默认的单位是deg，⽐如rotate（45deg）
  • 如果这个值为正值，则是元素对原点中⼼顺时针旋转； 反之如果这个值为负值，元素对原点中⼼进⾏逆时针旋转。
  • 可以单独对x轴y轴z轴进⾏设置：这⾥的X/Y/Z也是是需要⼤写的。
              rotateX() ，指元素围绕其 X 轴以设定的度数进⾏旋转
              rotateY() ，元素围绕其 Y 轴以设定的度数进⾏旋转
              rotateZ() , 元素围绕其 Y 轴以设定的度数进⾏旋转

 4、缩放 transform:scale();

  1. 缩放属性是让元素根据中⼼原点对对象进⾏缩放。
  2.  默认值是1，这⾥的参数没有单位，1以下的任何值，使⼀个元素缩⼩，0则是消失；⽽任何⼤于1的值，会让元素 变得更⼤。
  3.  缩放属性的属性值和位移属性的属性值是类似的语法，可以是⼀个值，也可以有两个属性值： 只有⼀个值的时候第⼆个值和第⼀个值是相等的； 两个值的时候，属性值1是指在x轴上缩放元素，属性值2是指在y轴上缩放元素。
  4. 单独对x轴y轴进⾏设置：同样这⾥的X/Y/Z也是是需要⼤写的。
                   transform:scaleX(); 元素只在 x 轴上缩放元素
                   transform:scaleY(); 元素只在 y 轴上缩放元素

     5.也不会影响其他盒⼦

5、倾斜 transform:skew()

  • 倾斜skew()是指通过设定的⻆度以其中⼼位置围绕着X轴和Y轴按照⼀定的⻆度倾斜显示。
  • ⼀个参数时：表示x轴的倾斜x⻆度,y轴默认为0；
  •  两个参数时：第⼀个参数表示x轴的倾斜⻆度，第⼆个参数表示y轴的倾斜⻆度。
  •  变形的单位是deg
 x值：为正则向左变形，为负则向右变形
y值：为正则向上变形，为负则向下变形
 以上是以左上⻆为参照向左向右，向上，向下变形
  •  可单独对x轴y轴进⾏设置：这⾥的X/Y也是是需要⼤写的。
transform:skewX() ；
transform:skewY()；

6、 变形原点 transform-origin

  1. 原点就是元素的中⼼，通过 transform-origin 改变原点的位置
  2.  ⽤变形原点 transform-origin属性，该属性只有在设置了transform属性的时候会起作⽤
  3.  设置偏移量值都是从元素左上⻆开始的
  4. transform-origin也有两个属性值：
transform-origin:（⽔平⽅向 垂直⽅向），默认值 transform-origin:（center center）
值可以为⽅向值（left、center、top、right、bottom等），也可以是以px、%为单位的数值

变形3D

1.⽗元素样式：

3D变化需要⽗元素设置样式才能保留3d的变化效果
保留3d变化： transform-style：preserve-3d; 默认值flat
设置视⻆深度 （景深）： perspective [pǝ'spektiv] 设置当前⽹⻚的视距为800px，⼈眼距离⽹⻚的距离，⼀般不⼩于600px
有的浏览器 html{perspective: 800px; },
⼤多浏览器直接设置在 ⽗元素 上，例如：perspective：800-1200px；⼀般为900px-1000px

2 位移 :translate3d translateX translateY translateZ

translate3d(x,y,z):必须传递三个参数
translateX(x) translateY(y) translateZ(z) 参数单位为px
x值：沿着x轴向右，为正；沿着x轴向左，为负
y值：沿着y轴向下，为正；沿着y轴向上，为负
z值：沿着z轴向屏幕外，为正；沿着z轴向屏幕内，为负

3:旋转:rotate3d rotateX rotateY rotateZ

rotateX(⻆度) rotateY(⻆度) rotateZ(⻆度) 沿着元素中⼼点穿过的某个轴旋设置的⻆度
参数⻆度单位为deg
⻆度值：
rotateX 为正则顺时针旋转，为负则为逆时针旋转
rotateY 为正则逆时针旋转，为负则顺时针旋转
rotateZ 为正则顺时针旋转，为负则为逆时针旋转
可以通过transform-origin：left来设置，⽐如绕着元素的左边框旋转
rotate3d（x,y,z,deg）:沿着⾃定义轴旋转deg为⻆度()
backface-visibility属性定义当元素旋转到背⾯向屏幕时，是否可⻅
visible 背⾯可⻅
hidden 背⾯不可⻅
4:缩放：scale3d scaleX scaleY scaleZ
scale3d(num,num,num):必须要传三个参数
scaleX(x) scaleY(y) scaleZ(z) ,分别代表x和y轴⽅向缩放相应的倍数

小练习

1、过渡

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .box{
  10.             width: 200px;
  11.             height: 200px;
  12.             background-color: #bfa;
  13.             margin: 50px auto;
  14.             /* 设置过渡 */
  15.             /* 设置过渡的元素属性 */
  16.             /* transition-property: height background-color width; */
  17.            /* transition-property: all; */
  18.             /* 设置过渡的时间 */
  19.             /* transition-duration: 1s; */
  20.             /* 设置过渡的延迟 */
  21.             /* transition-delay: 2s; */
  22.             /* 设置过渡的变化曲线 */
  23.             /* transition-timing-function:ease ; */
  24.             transition:1s;
  25.  
  26.         }
  27.         .box:hover{
  28.             width: 300px;
  29.             height: 300px;
  30.             background-color: orange;
  31.             opacity: 0;
  32.             border-radius: 50%;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <!-- 需求：鼠标移入，盒子高度变成300px -->
  38.     <div class="box"></div>
  39. </body>
  40. </html>

2、过渡变化曲线 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.         text-decoration: none;
  13.         list-style: none;
  14.       }
  15.       ul {
  16.         width: 500px;
  17.         height: 400px;
  18.         border: 10px solid red;
  19.       }
  20.       li {
  21.         width: 50px;
  22.         height: 50px;
  23.         border-radius: 50%;
  24.         background-color: blueviolet;
  25.         text-align: center;
  26.         line-height: 50px;
  27.         color: orange;
  28.         margin: 5px 0px;
  29.         /* 设置过渡 */
  30.         transition-property: margin-left;
  31.         transition-duration: 1s;
  32.       }
  33.       /* 设置不同的过渡曲线 */
  34.       li:nth-child(1) {
  35.         transition-timing-function: ease;
  36.       }
  37.       li:nth-child(1) {
  38.         transition-timing-function: linear;
  39.       }
  40.       li:nth-child(2) {
  41.         transition-timing-function: ease-in;
  42.       }
  43.       li:nth-child(3) {
  44.         transition-timing-function: ease-out;
  45.       }
  46.       li:nth-child(4) {
  47.         transition-timing-function: ease-in-out;
  48.       }
  49.       li:nth-child(5) {
  50.         transition-timing-function: steps(5);
  51.       }
  52.  
  53.       li:nth-child(2n) {
  54.         background-color: aquamarine;
  55.       }
  56.       ul:hover > li {
  57.         margin-left: 450px;
  58.       }
  59.     </style>
  60.   </head>
  61.   <body>
  62.     <ul>
  63.       <li>1</li>
  64.       <li>2</li>
  65.       <li>3</li>
  66.       <li>4</li>
  67.       <li>5</li>
  68.       <li>6</li>
  69.     </ul>
  70.   </body>
  71. </html>

​​​​​​​ 

3、米兔练习

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         div{
  10.             width: 155px;
  11.             height: 170px;
  12.             background-image: url(./米兔照片.jpg);
  13.             background-position: 0 0;
  14.             transition: steps(4)  2s;
  15.         }
  16.         div:hover{
  17.             background-position: -630px 0;
  18.         }
  19.  
  20.     </style>
  21. </head>
  22. <body>
  23.     <div></div>
  24. </body>
  25. </html>

 

4、行走的小雪人

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>行走的雪人</title>
  8.     <style>
  9.       .box1 {
  10.         width: 126px;
  11.         height: 180px;
  12.         background-image: url(./111.jpeg);
  13.         animation: xueren 1s steps(4) infinite reverse ;
  14.       }
  15.       @keyframes xueren {
  16.         from {
  17.           background-position: 0 0;
  18.         }
  19.         to {
  20.           background-position: -487px 0;
  21.         }
  22.       }
  23.     </style>
  24.   </head>
  25.   <body>
  26.     <div class="box1"></div>
  27.   </body>
  28. </html>

 

 

5、西游记动画

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .box {
  10.             height: 500px;
  11.             background-image: url(./images/bg.jpg);
  12.             margin: 100px auto;
  13.             position: relative;
  14.             animation: shun 15s infinite linear both;
  15.  
  16.         }
  17.  
  18.  
  19.         .text {
  20.             position: absolute;
  21.             /* border: 2px solid red; */
  22.             left: 0;
  23.             bottom: 0;
  24.         }
  25.  
  26.         .shun {
  27.             width: 200px;
  28.             height: 180px;
  29.             background-image: url(./images/1.png);
  30.             animation: shun 1s steps(8) infinite reverse both;
  31.         }
  32.  
  33.         .zhu {
  34.             width: 200px;
  35.             height: 180px;
  36.             background-image: url(./images/2.png);
  37.             animation: zhu 1s steps(8) infinite reverse both;
  38.         }
  39.  
  40.         .tang {
  41.             width: 150px;
  42.             height: 200px;
  43.             background-image: url(./images/3.png);
  44.             animation: tang 1s steps(8) infinite reverse both;
  45.         }
  46.  
  47.         .sa {
  48.             width: 210px;
  49.             height: 200px;
  50.             background-image: url(./images/4.png);
  51.             animation: sa 1s steps(8) infinite reverse both;
  52.         }
  53.  
  54.         .box div {
  55.             float: left;
  56.  
  57.             margin-right: 100px;
  58.  
  59.         }
  60.         @keyframes box {
  61.             from {
  62.                 background-position: 0%;
  63.             }
  64.  
  65.             to {
  66.                 background-position: 100%;
  67.             }
  68.  
  69.         }
  70.  
  71.         @keyframes shun {
  72.             from {
  73.                 background-position: 0 0;
  74.             }
  75.  
  76.             to {
  77.                 background-position: -1600px 0;
  78.             }
  79.  
  80.         }
  81.  
  82.         @keyframes zhu {
  83.             from {
  84.                 background-position: 0 0;
  85.             }
  86.  
  87.             to {
  88.                 background-position: -1600px 0;
  89.             }
  90.  
  91.         }
  92.  
  93.  
  94.         @keyframes tang {
  95.             from {
  96.                 background-position: 0 0;
  97.             }
  98.  
  99.             to {
  100.                 background-position: -1360px 0;
  101.             }
  102.  
  103.         }
  104.  
  105.         @keyframes sa {
  106.             from {
  107.                 background-position: 0 0;
  108.             }
  109.  
  110.             to {
  111.                 background-position: -1680px 0;
  112.             }
  113.  
  114.         }
  115.     </style>
  116. </head>
  117.  
  118. <body>
  119.  
  120.  
  121.  
  122.     <div class="box">
  123.  
  124.         <div class="text">
  125.  
  126.             <div class="shun"></div>
  127.             <div class="zhu"></div>
  128.             <div class="tang"></div>
  129.             <div class="sa"></div>
  130.  
  131.         </div>
  132.  
  133.     </div>
  134.  
  135.  
  136. </body>
  137.  
  138. </html>

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/266249?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号