CSS教程--动画

Posted 2023-03-07 MYUNB

目录

一．２Ｄ转换

１.ｔｒａｎｓｌａｔｅ（）平移操作

２.ｒｏｔａｔｅ（）　旋转操作

３.ｓｃａｌｅ（）　放大缩小操作

３.１.ｓｃａｌｅＸ（）　

３.２.ｓｃａｌｅＹ（）　

４.ｓｋｅｗ（）　倾斜操作

二．３Ｄ变换

１.ｒｏｔａｔｅＸ（）　

２.ｒｏｔａｔｅＹ（）　

３.ｒｏｔａｔｅＺ（）　

三．ＣＳＳ过渡

１.ｔｒａｎｓｉｔｉｏｎ　属性

２.ｔｒａｎｓｉｔｉｏｎ－ｄｅｌａｙ　属性

３.ｔｒａｎｓｉｔｉｏｎ－ｔｉｍｉｎｇ－ｆｕｎｃｔｉｏｎ　属性

４.ｔｒａｎｓｉｔｉｏｎ－ ｐｒｏｐｅｒｔｙ　属性和ｔｒａｎｓｉｔｉｏｎ－ｄｕｒａｔｉｏｎ属性

四．ＣＳＳ动画

---

一．２Ｄ转换

ＣＳＳ中的２Ｄ转换顾名思义就是在平面内对元素或标签进行二维变换，通过ｔｒａｎｆｏｒｍ属性可以对元素进行平移，旋转，放大缩小和倾斜等操作，如下是这几种变换的方法：

• ｔｒａｎｓｌａｔｅ
• ｒｏｔｕｔｅ
• ｓｃａｌｅ
• ｓｋｅｗ

---

１.ｔｒａｎｓｌａｔｅ（）平移操作

        ｔｒａｎｓｌａｔｅ方法有两个参数，对应Ｘ轴Ｙ轴，也就是该元素要移动到位置

例如：将一个ｄｉｖ标签沿ｘ移动５０ｐｘ，沿ｙ移动１００ｐｘ

．ｄｉｖ｛
ｗｉｄｔｈ：３０ｐｘ；
ｈｅｉｇｈｔ：５０ｐｘ；
ｔｒａｎｓｆｏｒｍ：ｔｒａｎｓｌａｔｅ（５０ｐｘ，１００ｐｘ）
｝

---

２.ｒｏｔａｔｅ（）　旋转操作

        给ｒｏｔａｔｅ（）方法传入一个角度时可以实现旋转操作，旋转的方向取决于传入角度的正负，正角度顺时针旋转，负角度逆时针旋转

例如：将一个ｄｉｖ标签顺时针旋转２０度

 div
            width: 60px;
            height:80px;
            background-color: chartreuse;
            border-radius:20%;
            transform: rotate(20deg);
        

---

３.ｓｃａｌｅ（）　放大缩小操作

        ｓｃａｌｅ（）方法传入两个数值分别表示宽度和高度变换的倍数，数值对于１表示放大，小数表示缩小，当然，负数是没有意义的

例如：将一个ｄｉｖ标签宽放大２倍，高放大３倍

  div
            width: 60px;
            height:80px;
            background-color: chartreuse;
            position: fixed;
            border-radius:20%;
            transform: scale(2,3) translate(50px,100px);
        

---

３.１.ｓｃａｌｅＸ（）　

        ｓｃａｌｅＸ（）方法和ｃｓａｌｅ（）方法一样，但ｓｃａｌｅＸ（）只对元素宽度进行改变

---

３.２.ｓｃａｌｅＹ（）　

        不用说，都懂

---

４.ｓｋｅｗ（）　倾斜操作

        ｓｋｅｗ（）方法传入两个角度参数，实现沿Ｘ，Ｙ轴对元素的倾斜，注意倾斜和旋转不一样

例如：沿Ｘ轴倾斜ｄｉｖ标签２０度，Ｙ轴３０度

 div
            width: 60px;
            height:80px;
            background-color: chartreuse;
            position: fixed;
            border-radius:20%;
            transform: skew(20deg,30deg) translate(50px,100px);
        

注意ｓｋｅｗＸ（）方法和ｓｋｅｗＹ（）方法分别是沿Ｘ，Ｙ轴倾斜

---

二．３Ｄ变换

３Ｄ变换只涉及到三维的旋转，３Ｄ变换的ｔｒａｎｓｆｏｒｍ属性有如下几个方法：

• ｒｏｔａｔｅＸ
• ｒｏｔａｔｅＹ
• ｒｏｔａｔｅＺ

---

１.ｒｏｔａｔｅＸ（）　

ｒｏｔａｔｅＸ（）方法沿ｘ轴旋转指定角度

例如：

#myDiv 
  transform: rotateX(150deg);

---

２.ｒｏｔａｔｅＹ（）　

ｒｏｔａｔｅＸ（）方法沿ｘ轴旋转指定角度

例如：

#myDiv 
  transform: rotateY(150deg);

---

３.ｒｏｔａｔｅＺ（）　

ｒｏｔａｔｅＸ（）方法沿ｘ轴旋转指定角度

例如：

#myDiv 
  transform: rotateＺ(150deg);

---

三．ＣＳＳ过渡

        ＣＳＳ过渡指可以在一定时间内改变元素的属性，所有，一个过渡操作要包含过渡的元素和过渡的时间，如下是过渡的几个属性：

• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

---

１.ｔｒａｎｓｉｔｉｏｎ　属性

        ｔｒａｎｓｉｔｉｏｎ属性给定过渡的元素和时间，即可在给定时间内执行过渡操作，注意的是，ｔｒａｎｓｉｔｉｏｎ属性只通过过渡的条件，过渡的操作自行定义

例如：但鼠标悬停时改变ｄｉｖ标签的宽度

 div
            width: 90px;
            height: 100px;
            background-color: #3425;
            border-radius:20%;
            transition:width 2s;
        
        div:hover
            width: 150px;
        

---

２.ｔｒａｎｓｉｔｉｏｎ－ｄｅｌａｙ　属性

        ｔｒａｎｓｉｔｉｏｎ－ｄｅｌａｙ属性规定了过渡效果的延迟时间，说通俗一点就是该属性规定了要等待几秒后在发生过渡的效果（以秒为单位）

例如：等待１秒后再实现鼠标悬停时改变ｄｉｖ的宽度

   div
            width: 90px;
            height: 100px;
            background-color: #3425;
            border-radius:20%;
            transition:width 2s;
            transition-delay: 1s;
        
        div:hover
            width: 150px;
        

---

３.ｔｒａｎｓｉｔｉｏｎ－ｔｉｍｉｎｇ－ｆｕｎｃｔｉｏｎ　属性

        transition-timing-function 属性规定过渡效果的速度曲线。

transition-timing-function 属性可接受以下值：

• ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
• linear - 规定从开始到结束具有相同速度的过渡效果
• ease-in -规定缓慢开始的过渡效果
• ease-out - 规定缓慢结束的过渡效果
• ease-in-out - 规定开始和结束较慢的过渡效果
• cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

---

４.ｔｒａｎｓｉｔｉｏｎ－ ｐｒｏｐｅｒｔｙ　属性和ｔｒａｎｓｉｔｉｏｎ－ｄｕｒａｔｉｏｎ属性

        ｔｒａｎｓｉｔｉｏｎ－ｐｒｏｐｅｒｔｙ属性指定元素过渡的属性，相当于ｔｒａｎｓｉｔｉｏｎ属性的第一个参数，而ｔｒａｎｓｉｔｉｏｎ－ｄｕｒａｔｉｏｎ属性规定过渡的时间，类似于第二个参数

例如：上个例子可以写成这样

   div
            width: 90px;
            height: 100px;
            background-color: #3425;
            border-radius:20%;
            transition-duration:2s;
            transition-property: width;
            transition-delay: 1s;
        
        div:hover
            width: 150px;
        

---

四．ＣＳＳ动画

        ＣＳＳ通过改变ＨＴＭＬ元素来实现动画效果

        首先谈到CSS动画，我们先要知道@keyframes,它规定了一个html标签可以在一段时间里改变从而实现动画效果，

        然后是animaton-duration,规定了动画的时间，如果没有设置animation-durantion属性动画是没法子实现，因为该属性默认值为0，我们可以以from和to为时间规定动画变化的时间，或者是以0%~100%为时间线来表示

        animation-delay，设置动画的延迟效果，如果是负值，表示动画提前开始

        animation-retrion-count，设置动画播放的次数，如果次数为infinite表示动画一直播放

        

        animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

animation-direction 属性可接受以下值：

• normal - 动画正常播放（向前）。默认值
• reverse - 动画以反方向播放（向后）
• alternate - 动画先向前播放，然后向后
• alternate-reverse - 动画先向后播放，然后向前

        

        animation-timing-function 属性规定动画的速度曲线。

animation-timing-function 属性可接受以下值：

• ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
• linear - 规定从开始到结束的速度相同的动画
• ease-in - 规定慢速开始的动画
• ease-out - 规定慢速结束的动画
• ease-in-out - 指定开始和结束较慢的动画
• cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

        

        animation-fill-mode 属性规定目标元素的样式，就是动画结束了，图案的位置

animation-fill-mode 属性可接受以下值：

• none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
• forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
• backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
• both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

例如：一个简单的颜色变换动画

 @keyframes example
          fromtop:0px;background-color: chartreuse;
         totop: 200px;background-color: aqua;
      
      div
          background-color: chartreuse;
          width: 80px;
          height: 70px;
          position: relative;
          border-radius: 50px;
          animation-name: example;
          animation-duration: 2s;
          animation-delay:1s;
          animation-iteration-count: 2;
          animation-fill-mode: backwards;