动画的基本使用

呆码王子

已于 2023-03-14 20:51:30 修改

阅读量82

点赞数 1

分类专栏： HTML 文章标签： css css3 html html5 前端 Powered by 金山文档

于 2023-03-13 20:31:48 首次发布

本文链接：https://blog.csdn.net/L123456llljdjdbd/article/details/129505458

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

过渡

过渡（

transition）[træn'siʒən]

-通过过渡可以指定⼀个属性发⽣变化时的切换⽅式，平滑的过渡

-需要在某种条件下触发，例如hover、active、focus情况下

-⼀次性的效果，不能循环，只能做简单的动画

-只有两帧，设置动画初始值和结束值

-IE10开始兼容，移动端兼容良好

.过渡的4个属性

transition-property

意义：哪些属性要过渡（选填）

属性值：

none 没有属性获得过渡效果

all 所有属性都参与过渡默认值

property ⾃定义应⽤过渡效果，⼀个或多个，⽤逗号隔开

备注：

1、所有数值类型的属性，都可以参与过渡，⽐如width、height、left、top、

border-radius、opacity等

从⼀个有效数值向另⼀个有效数值进⾏过渡

transition-duration

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

属性值：时间的单位：s和ms1s=1000ms

transition-timing-function

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

属性值：

ease [i:z] 默认值，慢速开始，先加速，然后再减速

*linear 匀速运动

ease-in 先慢后快加速运动

ease-out 先快后慢减速运动

ease-in-out 以慢速开始和结束的过渡效果

*steps()分布执⾏过渡效果

cubic-bezier(n,n,n,n)⽴⽅⻉塞尔曲线函数，值是0-1之间的数值

transition-delay

意义：过渡效果的延迟，等待⼀段时间后执⾏过渡（选填）

属性值：时间的单位：s和ms1s=1000ms

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 需求1:鼠标移入，box1宽度由100px变为200px -->
    <!-- 需求2:鼠标移入，box1宽度由100px缓慢变为200px -->
    <style>
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 50px auto;
        /* 过渡的属性  可选值
          1、可以写多个css属性值，逗号隔开即开
          2、如果不写或过度属性写错了，默认所有属性都发生过渡
        */
        /* transition-property: all; */
        /* 过渡的时间  ms/s   必写*/
        /* transition-duration: 3s; */
        /* 过渡变化曲线 选写*/
        /* transition-timing-function: ease; */
        /* 过渡的延迟  选写  默认是0s*/
        /* transition-delay: 2s; */
        /* 过渡的简写，过渡的时间是必写的，其他都有默认值 */
        /* transition: all ease 2s 0s; */
        transition: 2s;
      }
      /* .box1:hover{
        width: 200px;
      } */
      .box1:hover {
        width: 200px;
        height: 200px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
  </body>
</html>

动画

意义：动画和过渡类似，都是可以实现⼀些动态效果，不同的是过渡需要在某个属性发⽣变化时才能触发，

例如hover，acitve时，动画可以⾃动触发动画

第⼀步：先要设置⼀个关键帧，关键帧设置了动画每⼀个步骤

  @keyframes move {
       设置方式一 
        /*动画开始 */
      from {
          margin-left: 0;
        } 
       动画结束 
         to {
          margin-left: 500px;
        } 
        /* 设置方式二 */
         0% {
          margin-left: 0;
          margin-top: 0;
        }

动画属性

1 animation-name

绑定到选择器的关键帧的名称，告诉系统需要执⾏哪个动画(必填)

设置动画的名字，和@keyframs相对应，可以设置多个动画，逗号隔开，应⽤多个动画

2 animation-duration

动画的完成时间，告诉系统动画持续的时长（必填）时间单位：s ms

3 animation-timing-function

设置动画如何完成一个周期，告诉系统动画执行的速度（与过度动画类型）

*ease [i:z] 默认值，慢速开始，先加速，然后再减速

*linear 匀速运动

ease-in 先慢后快加速运动

ease-out 先快后慢减速运动

ease-in-out 以慢速开始和结束的过渡效果

*steps()分布执⾏过渡效果

cubic-bezier(n,n,n,n)⽴⽅⻉塞尔曲线函数，值是0-1之间的数值

4 animation-delay

动画在启动前的延迟间隔

5animation-iteration-count

动画的播放次数，告诉系统动画需要执行几次n 定义动画播放n次 infinite无限次往返执行

6 animation-direction

指定是否应给轮流反向播放动画

normal 默认值：从from向to运⾏，每次都是这样

reverse 从to到from运⾏，每次都是这样

* alternate 从from向to运⾏，重复执⾏动画时反向执⾏

alternate-reverse 从to向from运⾏，重复执⾏动画时反向执⾏

7 animation-fill-mode

规定当动画不播放时（完成时，延时未开始播放时），应用到的元素样式

none默认值动画执⾏完毕元素回到原来的位置

* forwards 动画执⾏完毕，会停⽌在动画结束的位置

backwards 动画延时等待时，元素就会处于开始位置both 结合了forwards和ackwards的特点

8 animation-play-state

告诉系统当前动画是否需要暂停

running 默认值动画执⾏

paused 动画暂停

9 animation

简写，可以写以上任意属性的可选值

animation:关键帧的名称动画持续的时间运动状态(linear(匀速)) 动画延迟的时间动画的循

环次数动画的运动⽅式(设置正向或者反向)

变形2D

变形属性transform：

变形不会影响到⻚⾯的布局(只折腾⾃⼰)

尽量变形写在⼀个transform⾥，不然下⾯再写⼀个，就会覆盖上⾯

可选值：

位移—translate()

缩放—scale()

旋转—rotate()

倾斜—skew()

位移 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、对于⾏内元素是没有效果的

 //垂直⽔平居中的效果
2 position: absolute;
3 left: 50%;
4 top: 50%;
5 transform: translate(-50%, -50%);
6 /* transform: translateX(-50%) translateY(-50%); */

旋转 transform: rotate();

默认情况下是绕着中⼼点进⾏转动的；

默认的单位是deg，⽐如rotate（45deg）

如果这个值为正值，则是元素对原点中⼼顺时针旋转；反之如果这个值为负值，元素对原点中⼼进⾏逆时针旋转。

可以单独对x轴y轴z轴进⾏设置：这⾥的X/Y/Z也是是需要⼤写的。

rotateX() ，指元素围绕其 X 轴以设定的度数进⾏旋转

rotateY() ，元素围绕其 Y 轴以设定的度数进⾏旋转

rotateZ() , 元素围绕其 Y 轴以设定的度数进⾏旋转

缩放transform:scale()

缩放属性是让元素根据中⼼原点对对象进⾏缩放。

默认值是1，这⾥的参数没有单位，1以下的任何值，使⼀个元素缩⼩，0则是消失；⽽任何⼤于1的值，会让元素变得更⼤。

缩放属性的属性值和位移属性的属性值是类似的语法，可以是⼀个值，也可以有两个属性值：

只有⼀个值的时候第⼆个值和第⼀个值是相等的；

两个值的时候，属性值1是指在x轴上缩放元素，属性值2是指在y轴上缩放元素。

单独对x轴y轴进⾏设置：同样这⾥的X/Y/Z也是是需要⼤写的。

transform:scaleX();元素只在x轴上缩放元素

transform:scaleY();元素只在y轴上缩放元素

也不会影响其他盒⼦

倾斜transform:skew()

1 倾斜skew()是指通过设定的⻆度以其中⼼位置围绕着X轴和Y轴按照⼀定的⻆度倾斜显示。

2 ⼀个参数时：表示x轴的倾斜x⻆度,y轴默认为0；

3两个参数时：第⼀个参数表示x轴的倾斜⻆度，第⼆个参数表示y轴的倾斜⻆度。

4 变形的单位是deg

x值：为正则向左变形，为负则向右变形

y值：为正则向上变形，为负则向下变形

以上是以左上⻆为参照向左向右，向上，向下变形

5 可单独对x轴y轴进⾏设置：这⾥的X/Y也是是需要⼤写的。

transform:skewX() ；

transform:skewY()；

变形原点 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、%为单位的值

呆码王子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动画的基本使用

默认值是1，这⾥的参数没有单位，1以下的任何值，使⼀个元素缩⼩，0则是消失；值可以为⽅向值（left、center、top、right、bottom等），也可以是以px、%为单位的值。动画和过渡类似，都是可以实现⼀些动态效果，不同的是过渡需要在某个属性发⽣变化时才能触发，设置动画的名字，和@keyframs相对应，可以设置多个动画，逗号隔开，应⽤多个动画。两个值的时候，属性值1是指在x轴上缩放元素，属性值2是指在y轴上缩放元素。3两个参数时：第⼀个参数表示x轴的倾斜⻆度，第⼆个参数表示y轴的倾斜⻆度。
复制链接

扫一扫