css动画的三种常用实现方式(简单易懂适合小白)

超宝最帅
495 阅读4分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第二天，点击查看活动详情

一句话告诉大家,css实现动画主要有3种方式，这三种方式必会,分别是:

transition实现过渡动画,

transform转变动画，

animation实现自定义动画。

transition过渡动画

image.png

下面代码呈现出来的效果就是鼠标经过div,宽高都变大(200→400;100→200) 颜色由粉色变成蓝色

<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>CSS3 过渡效果</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            
            /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
            
            /* transition: width .5s ease 0s, height .5s ease 1s; */
            
            
            /* 如果想要写多个属性，利用逗号进行分割 */            
            /* transition: width .5s, height .5s; */
            
              
                 /* 谁做过渡，给谁加 */
            /* transition: height .5s ease 1s; */
            
         
            
              /* 如果想要多个属性都变化，属性写all就可以了 */              
                transition: all 0.5s;
        }
        
        div:hover {
            /* 过渡经常要和hover一起使用 */
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

transform转变动画

先会基本用法就好啦 等以后需要的话可以再细查

基本写法:

transform:rotate(度数)

transform:scale(倍数,[倍数])

transform:skew(度数,[度数])

transform:translate(距离,[距离])

rotate(旋转)

2D旋转

transform: rotate(45deg); // 顺时针旋转45度

3D旋转

围绕原地到(x,y,z)的直线进行3D旋转

transform: rotate(x,y,z,angle);

x,y,z：分别表示 X、Y 和 Z 轴方向，都不能省略；

angle：设置对象设置对象的旋转角度，不能省略；

rotateX(angle)，沿着X轴进行3D旋转；

rotateY(angle)，沿着Y轴进行3D旋转；

rotateZ(angle)，沿着Z轴进行3D旋转

单位 deg 为度的意思，正数为顺时针旋转，负数为逆时针旋转。

image.png

scale(缩放)

2D缩放

transform: scale(0.5);

transform: scale(0.5, 2);

  • 一个参数时： 表示水平和垂直同时缩放该倍率；
  • 两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率 。

3D缩放

无非就是多了个z轴

transform: scale3d(m, n, s);

transform: scaleX(m);

transform: scaleY(n);

transform: scaleZ(s);

  • m, n, s为收缩比例

skew(倾斜)

transform: skew(30deg) ;

transform: skew(30deg, 30deg);

  • 一个参数时：表示水平方向的倾斜角度 ；
  • 两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度 。
  • skew 的默认原点 transform-origin 是这个物件的中心点(transform-origin这个东西,)

translate(位移)

2D移动

3D移动

组合变形

 transform: rotate(44deg) scale(0.8) skew(35deg, 35deg) translate(10px, 10px);

animation关键帧动画(重要)

css3中添加的新属性animation是用来为元素实现动画效果的，使用动画时，用@keyframes来作为关键帧，通过百分比构建样式规则。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。

语法

      animation: name duration timing-function delay iteration-count direction;

name 规定需要绑定到选择器的 keyframe 名称(具体参考loading实例)

timing-function 规定动画的速度曲线。 默认是 “ease”。其他常用值 linear

delay 规定动画何时开始 。 默认是 0。

iteration-count 规定动画被播放的次数 。 默认是 1。其他常用值 infinite

direction 规定动画是否在下一周期逆向地播放 。 默认是 “normal”; alternate (轮流),。(不太懂,不常用)

@keyframes

  • 通过 @keyframes 规则，您能够创建动画。

  • @keyframes定义一个动画，并定义具体的动画效果，比如是放大还是位移等等。

  • @keyframes 它定义的动画并不直接执行，需要借助animation来运转。

  • 在动画过程中，您能够多次改变这套 CSS 样式。

  • 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

    百分比是指动画完成一遍的时间长度的的百分比 ，0% 是动画的开始时间，50%是动画完成一半的时间，100% 动画的结束时间。百分比后面的花括号写：在动画执行过程中的某时间点要完成的变化。

  • 为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

例如1

@keyframes a { 
        0% { transform: rotate(0deg);
        } 
        100% { transform: rotate(360deg); 
        }
        }

例如2

.load-border {
    width: 120px;
    height: 120px;
    background: url(../images/loading_icon.png) no-repeat center center;
    -webkit-animation: gif 1.4s infinite linear;
    animation: gif 1.4s infinite linear; 
}
@keyframes gif {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

loading动画实例(这个可以不看)

(摘的是vue项目中的内容,样式使用了less来写)

html:

  <!-- loading框 -->
    <div class="maskTwo" v-if="flagLoading" :class="[afterPay?'noneModule':'']">
      <div class="back">
        <div><img class="loading" src="@/assets/images/circle.png" alt=""></div>
        <div>挂号中请稍后</div>
      </div>
    </div>
    

style:

.maskTwo {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(1, 89, 170, 0.7);
  top: 0;
  left: 0;
  z-index: 99999;
}

.back {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 43%;
  height: 45%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: url("@/assets/images/lodingback.png") no-repeat center/100% 100%;
  div:nth-of-type(1) {
    margin: 14% auto 12%;
    .loading {
      width: 98%;
      height: 90%;
      border-radius: 50%;
      animation: a 1.48s linear infinite;  //关键步骤
    }

       //定义动画
    @keyframes a {  //关键步骤
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  }
  div:nth-of-type(2) {
    width: 41%;
    height: 12.5%;
    margin: 0 auto;
    font-size: 0.36rem;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 116%;
    letter-spacing: 5px;
  }
}

综合代码实例(要看一下)


<!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>transition过渡/transform变形/animation关键帧动画</title>
</head>
<style>
  .w_publuc-style {
    margin-bottom: 30px;
    border: 3px solid #ccc;
  }
  /* transition 过渡 */
  .w_transition {
    width: 200px;
    height: 200px;
    background-color: wheat;
    color: #333;

    transition: background 0.8s ease-in 0.3s, width 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s;    
    //下面的三行是为了适应不同终端的浏览器
    -moz-transition: background 0.8s ease-in 0.3s, width 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s; /* Firefox 4 */
    -webkit-transition: background 0.8s ease-in 0.3s, width 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s; /* Safari and Chrome */
    -o-transition: background 0.8s ease-in 0.3s, width 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s; /* Opera */
  }
  .w_transition:hover {  //transition一般需要结合hover使用
    background: yellow;
    width: 300px;
    color: blueviolet;
  }
  /* transform 变形 */
  .w_transform {
    margin:30px;
    width:200px;
    height:100px;
    background-color:yellow;

    /* Rotate div */
    transform:rotate(9deg);
     //下面的四行是为了适应不同终端的浏览器
    -ms-transform:rotate(9deg); /* Internet Explorer */
    -moz-transform:rotate(9deg); /* Firefox */
    -webkit-transform:rotate(9deg); /* Safari 和 Chrome */
    -o-transform:rotate(9deg); /* Opera */
  }

  /* animation 关键帧动画 */
  .w_animation {
    width: 200px;
    height: 200px;
    background: red;
    animation: myfirst 2s ease 0.5s infinite alternate;

    /* Firefox */
    -moz-animation:myfirst 2s ease 0.5s infinite alternate;
    /* Safari and Chrome */
    -webkit-animation:myfirst 2s ease 0.5s infinite alternate;
    /* Opera */
    -o-animation:myfirst 2s ease 0.5s infinite alternate;
  }
  //定义动画
  @keyframes myfirst {
    from {background:red;}
    to {background:yellow;}
  }
  /* Firefox */
  @-moz-keyframes myfirst {
    from {background:red;}
    to {background:yellow;}
  }
  /* Safari and Chrome */
  @-webkit-keyframes myfirst {
    from {background:red;}
    to {background:yellow;}
  }
  /* Opera */
  @-o-keyframes myfirst {
    from {background:red;}
    to {background:yellow;}
  }
</style>
<body>
  <div class="w_transition w_publuc-style">transition 过渡</div>
  <div class="w_transform w_publuc-style">transform 变形</div>
  <div class="w_animation w_publuc-style">animation 关键帧动画</div>
</body>
</html>
avatar
文章
阅读
粉丝