css动画详细知识点梳理

css动画深入剖析整理—前端

一前言

css动画是个很神奇的玩意儿，但是属性又很容易混淆，傻傻分不清楚。前端开发已经习惯用Javascript来写动画，但是作为一个想走前端方向的学生，我觉得还是有必要掌握css动画的。

二 animation,transition,transform,translate 详细整理

2.1 animation(动画)

（1）animation定义和用法（animation属性是一个属性的简写，用于设置六个+两个动画属性。）

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-play-state
animation-fill-mode

attention：一定要写animation-duration属性，否则动画时长为0，动画将不会播放。

（2）属性值（animation: name duration timing-function delay iteration-count direction;）

animation-name：用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致。
animation-duration：指定动画完成的时间，以秒或者毫秒计。
animation-timing-function：规定速度效果的速度曲线，是针对每一个小动画所在时间范围的变换速率。
animation-delay：规定浏览器在开始执行动画之前的等待时间
animation-iteration-count：定义动画播放的次数，可以选择具体的次数（1，2等）或者无数次（infinite）
animation-direction：设置动画播放方向：normal(按时间轴顺序),reverse(时间轴反方向运行),alternate(轮流，即来回往复进行),alternate-reverse(动画先反运行再正方向运行，并持续交替运行)
animation-play-state：设置动画的播放状态，控制播放或者停止。两个值running（持续），paused（停止）。
animation-fill-mode：设置动画结束后，元素的样式。四个值none（回到动画没开始时的状态），forwards（动画结束后停留在结束状态），backward（动画回到第一帧的状态），both（根据animation-direction轮流应用forwards和backwards规则，注意与iteration-count不要冲突(动画执行无限次)）

（3）举个栗子，更好的理解。（设计代码，验证效果。这一步在学习过程中很重要）

@keyframes：定义一个动画，定义的动画名称用来被animation-name调用。
animation-name：检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@key

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
      body{
          margin: 0px;
          padding: 0px;
          background-color: rgb(233, 234, 235);
      }
      .container{
          text-align: center;
      }/*设置div来使图片居中,看起来美观一点*/
      img{
          margin: 100px;
          width: 200px;
          height: 200px;
          border-radius: 50%;
          animation-name:mymove/*调用动画mymove*/
      }
      @keyframes mymove {
          0% {width: 100px;height: 100px;}
          50%{width: 200px;height: 200px;}
          100%{width: 100px;height: 100px;}     
      }/*定义帧动画名字，作为animation-name的属性值。表示当前的mymove元素执行所定义的帧动画*/
  </style>
</head>
<body>
<div class="container">
     <img src="img/3.jpg" class="mymove"></img>
     <!--src填写自己的图片路径-->
     <!--设置动画名称mymove-->
</div>
</body>
</html>

animation-duration：检索或设置对象动画的持续时间。

在上面的代码中无法执行动画的，因为只设置了动画名字和帧动画。你想一个动画动起来，我们只告诉它动谁（动画名字）怎么动（帧动画），还要告诉它动多久（持续时间）是吧。这是我学习这些属性和属性值的一个思考逻辑。

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
      body{
          margin: 0px;
          padding: 0px;
          background-color: rgb(233, 234, 235);
      }
      .container{
          text-align: center;
      }/*设置div来使图片居中,看起来美观一点*/
      img{
          margin: 100px;
          width: 200px;
          height: 200px;
          border-radius: 50%;
          animation-name:mymove;/*调用动画mymove*/
          animation-duration: 2s;/*设置持续时间2s*/
      }
      @keyframes mymove {
          0% {width: 100px;height: 100px;}
          50%{width: 200px;height: 200px;}
          100%{width: 100px;height: 100px;}     
      }/*定义帧动画名字，作为animation-name的属性值。表示当前的mymove元素执行所定义的帧动画*/
  </style>
</head>
<body>
<div class="container">
     <img src="img/3.jpg" class="mymove"></img>
     <!--src填写自己的图片路径-->
     <!--设置动画名称mymove-->
</div>
</body>
</html>

animation-timing-function：设置过渡类型

告诉它动谁（动画名字）怎么动（帧动画），告诉它动多久（持续时间），还要告诉它动的效果（过渡类型设置），比如快进快出，慢进慢出，快进慢出，慢进快出等等。

值	功能呢
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
      body{
          margin: 0px;
          padding: 0px;
          background-color: rgb(233, 234, 235);
      }
      .container{
          text-align: center;
      }/*设置div来使图片居中,看起来美观一点*/
      img{
          margin: 100px;
          width: 200px;
          height: 200px;
          border-radius: 50%;
          animation-name:mymove;/*调用动画mymove*/
          animation-duration: 2s;/*设置持续时间2s*/
          animation-timing-function: ease-in-out;/*以低速开始和结束*/
      }
      @keyframes mymove {
          0% {width: 100px;height: 100px;}
          50%{width: 200px;height: 200px;}
          100%{width: 100px;height: 100px;}     
      }/*定义帧动画名字，作为animation-name的属性值。表示当前的mymove元素执行所定义的帧动画*/
  </style>
</head>
<body>
<div class="container">
     <img src="img/3.jpg" class="mymove"></img>
     <!--src填写自己的图片路径-->
     <!--设置动画名称mymove-->
</div>
</body>
</html>

animation-delay：设置动画的延迟时间

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
      body{
          margin: 0px;
          padding: 0px;
          background-color: rgb(233, 234, 235);
      }
      .container{
          text-align: center;
      }/*设置div来使图片居中,看起来美观一点*/
      img{
          margin: 100px;
          width: 200px;
          height: 200px;
          border-radius: 50%;
          animation-name:mymove;/*调用动画mymove*/
          animation-duration: 2s;/*设置持续时间2s*/
          animation-timing-function: ease-in-out;/*以低速开始和结束*/
          animation-delay: 2s;/*浏览器打开，延迟两秒开始执行动画*/
      }
      @keyframes mymove {
          0% {width: 100px;height: 100px;}
          50%{width: 200px;height: 200px;}
          100%{width: 100px;height: 100px;}     
      }/*定义帧动画名字，作为animation-name的属性值。表示当前的mymove元素执行所定义的帧动画*/
  </style>
</head>
<body>
<div class="container">
     <img src="img/3.jpg" class="mymove"></img>
     <!--src填写自己的图片路径-->
     <!--设置动画名称mymove-->
</div>
</body>
</html>

animation-iterarion-count：设置动画循环次数

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
      body{
          margin: 0px;
          padding: 0px;
          background-color: rgb(233, 234, 235);
      }
      .container{
          text-align: center;
      }/*设置div来使图片居中,看起来美观一点*/
      img{
          margin: 100px;
          width: 200px;
          height: 200px;
          border-radius: 50%;
          animation-name:mymove;/*调用动画mymove*/
          animation-duration: 2s;/*设置持续时间2s*/
          animation-timing-function: ease-in-out;/*以低速开始和结束*/
          animation-delay: 2s;/*浏览器打开，延迟两秒开始执行动画*/
          animation-iteration-count: infinite;/*循环无数次*/
      }
      @keyframes mymove {
          0% {width: 100px;height: 100px;}
          50%{width: 200px;height: 200px;}
          100%{width: 100px;height: 100px;}     
      }/*定义帧动画名字，作为animation-name的属性值。表示当前的mymove元素执行所定义的帧动画*/
  </style>
</head>
<body>
<div class="container">
     <img src="img/3.jpg" class="mymove"></img>
     <!--src填写自己的图片路径-->
     <!--设置动画名称mymove-->
</div>
</body>
</html>

animation-direction：设置动画在循环中的方向

值	描述
normal	默认值。动画按正常播放。
reverse	动画反向播放。
alternate	动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
alternate-reverse	动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
      body{
          margin: 0px;
          padding: 0px;
          background-color: rgb(233, 234, 235);
      }
      .container{
          text-align: center;
      }/*设置div来使图片居中,看起来美观一点*/
      img{
          margin: 100px;
          width: 200px;
          height: 200px;
          border-radius: 50%;
          animation-name:mymove;/*调用动画mymove*/
          animation-duration: 2s;/*设置持续时间2s*/
          animation-timing-function: ease-in-out;/*以低速开始和结束*/
          animation-delay: 2s;/*浏览器打开，延迟两秒开始执行动画*/
          animation-iteration-count: infinite;/*循环无数次*/
          animation-direction: reverse;/*反向运动*/
      }
      @keyframes mymove {
          0% {width: 100px;height: 100px;}
          50%{width: 200px;height: 200px;}
          100%{width: 100px;height: 100px;}     
      }/*定义帧动画名字，作为animation-name的属性值。表示当前的mymove元素执行所定义的帧动画*/
  </style>
</head>
<body>
<div class="container">
     <img src="img/3.jpg" class="mymove"></img>
     <!--src填写自己的图片路径-->
     <!--设置动画名称mymove-->
</div>
</body>
</html>

animation-play-state：这是播放/停止（需要配合js代码）

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
      body{
          margin: 0px;
          padding: 0px;
          background-color: rgb(233, 234, 235);
      }
      .container{
          height: 250px;
          text-align: center;
      }/*设置div来使图片居中,看起来美观一点*/
      img{
          margin: 100px;
          width: 200px;
          height: 200px;
          border-radius: 50%;
          animation-name:mymove;/*调用动画mymove*/
          animation-duration: 2s;/*设置持续时间2s*/
          animation-timing-function: ease-in-out;/*以低速开始和结束*/
          animation-delay: 2s;/*浏览器打开，延迟两秒开始执行动画*/
          animation-iteration-count: infinite;/*循环无数次*/
          animation-direction: reverse;/*反向运动*/
      }
      @keyframes mymove {
          0% {width: 100px;height: 100px;}
          50%{width: 200px;height: 200px;}
          100%{width: 100px;height: 100px;}     
      }/*定义帧动画名字，作为animation-name的属性值。表示当前的mymove元素执行所定义的帧动画*/
      .content{
          text-align: center;
      }
  </style>
</head>
<body>
<div class="container">
     <img src="img/3.jpg"></img>
     <!--src填写自己的图片路径-->
     <!--设置动画名称mymove-->
</div>
<div class="content">
<button onclick="pause()" >暂停</button>
<button onclick="run()" >恢复</button>
</div>
</body>
<script>
    function pause(){
    document.querySelector('img').style.animationPlayState="paused"
}
function run(){
    document.querySelector('img').style.animationPlayState="running"
}

</script>
</html>

2.2 transform（变形）

（1）transform属性

rotate(旋转)
skew(扭曲)
scale(缩放)
translate(移动)

（2）transform语法

值	描述
none	定义不进行转换。
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 转换元素定义透视视图.

（3）举个栗子，更好的理解。（设计代码，验证效果。这一步在学习过程中很重要）

ps：src图片路径是博主图片相对路径，测试的时候请换成自己图片的绝对路径/相对路径

rotate移动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rotate</title>
<style>
            body{
                margin: 0px;
                padding: 0px;
                background-color: rgb(204, 204, 204);
            }
            img{
                width: 200px;
                height: 200px;
                border-radius: 50%;
            }
            .item4{
               margin: 130px;
               text-align: center;
            }
            /*rotate*/
            @keyframes rotate{
                0%{transform: rotate(0deg);}
                100%{transform: rotate(360deg);}
            }
            .rotate{
                animation: rotate 2s infinite linear;
            }
            @keyframes rotateX{
                0%{transform: rotateX(0deg);}
                100%{transform: rotateX(360deg);}
            }
            .rotateX{
                animation: rotateX 2s infinite linear;
            }
            @keyframes rotateY{
                0%{transform: rotateY(0deg);}
                100%{transform: rotateY(360deg);}
            }
            .rotateY{
                animation: rotateY 2s infinite linear;
            }
</style>
</head> 
<body>
<div class="item4">
            <img src="img/3.jpg" class="rotate">
            <img src="img/3.jpg" class="rotateX">
            <img src="img/3.jpg" class="rotateY">
</div>
</body> 
</html>

skew(扭曲）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>skew</title>
<style>
            body{
                margin: 0px;
                padding: 0px;
                background-color: rgb(204, 204, 204);
            }
            img{
                width: 200px;
                height: 200px;
                border-radius: 50%;
            }
            .item2{
               margin: 130px;
               text-align: center;
            }
            /*skew*/
            @keyframes skew{
                0% {transform: skew(0deg,0deg);}
                100% {transform: skew(20deg,20deg);}
            }
            .skew{
                animation: skew 2s infinite linear;
            }

            @keyframes skewX{
                0% {transform: skewX(0deg);}
                100% {transform: skewX(20deg);}
            }
            .skewX{
                animation: skewX 2s infinite linear;
            }
            @keyframes skewY{
                0% {transform: skewY(0deg);}
                100% {transform: skewY(20deg);}
            }
            .skewY{
                animation: skewY 2s infinite linear;
            }   
</style>
</head> 
<body>
    <div class="item2">
        <img src="img/3.jpg" class="skew">
        <img src="img/3.jpg" class="skewX">
        <img src="img/3.jpg" class="skewY">
    </div>
</body> 
</html>

scale(缩放)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
            body{
                margin: 0px;
                padding: 0px;
                background-color: rgb(204, 204, 204);
            }
            img{
                width: 200px;
                height: 200px;
                border-radius: 50%;
            }
            .item3{
               margin: 130px;
               text-align: center;
            }
             /*scale*/
             @keyframes scale{
                0%   {transform:scale(0.1,0.1);}	
                100%   {transform:scale(1,1);}
            }
            .scale{
                animation:scale 2s infinite linear;
            }

            @keyframes scaleX{
                0%   {transform:scaleX(0.1);}	
                100%   {transform:scaleX(1);}
            }
            .scaleX{
                animation:scaleX 2s infinite linear;
            }

            @keyframes scaleY{
                0%   {transform:scaleY(0.1);}	
                100%   {transform:scaleY(1);}
            }
            .scaleY{
                animation:scaleY 2s infinite linear;
            }
</style>
</head> 
<body>
    <div class="item3">
        <img src="img/3.jpg" class="scale">
        <img src="img/3.jpg" class="scaleX">
        <img src="img/3.jpg" class="scaleY">
    </div>
</body>
</html>

translate(移动)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
            body{
                margin: 0px;
                padding: 0px;
                background-color: rgb(204, 204, 204);
            }
            img{
                width: 200px;
                height: 200px;
                border-radius: 50%;
            }
            .item1{
               margin: 130px;
               text-align: center;
            }
            /*translate*/
            @keyframes translate{
            0%{transform: translate(0px,0px);}
                100%{transform: translate(100px,100px);}
            }
            .translate{
                animation: translate 2s infinite ease-in;
            }
            @keyframes translateX{
                0%{transform: translateX(0px);}
                100%{transform: translateX(100px);}
            }
            .translateX{
                animation: translateX 2s infinite linear;
            }
            @keyframes translateY{
                0%{transform: translateY(0px);}
                100%{transform: translateY(100px);}
            }
            .translateY{
                animation: translateY 2s infinite linear;
            }
</style>
</head> 
<body>
<div class="item1">
    <img src="img/3.jpg" class="translate">
    <img src="img/3.jpg" class="translateX">
    <img src="img/3.jpg" class="translateY">
</div>
</body>
</html>

四个合并写在一起，translate，skew，scale，rotate

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>transform:rotate translate scale skew</title>
        <style>
            body{
                margin: 0px;
                padding: 0px;
                background-color: rgb(204, 204, 204);
            }
            img{
                width: 200px;
                height: 200px;
                border-radius: 50%;
            }
            .item{
                margin: 100px;
            }
            .item1,.item2 ,.item3, .item4{
               margin: 130px;
               text-align: center;
            }
            .translate,.translateX,.translateY,.rotate,.rotateX,.rotateY,.scale,.scaleX,.scaleY,.skew,.skewX,.skewY{
                margin: 30px;
            }
            /*translate*/
            @keyframes translate{
            0%{transform: translate(0px,0px);}
                100%{transform: translate(100px,100px);}
            }
            .translate{
                animation: translate 2s infinite ease-in;
            }
            @keyframes translateX{
                0%{transform: translateX(0px);}
                100%{transform: translateX(100px);}
            }
            .translateX{
                animation: translateX 2s infinite linear;
            }
            @keyframes translateY{
                0%{transform: translateY(0px);}
                100%{transform: translateY(100px);}
            }
            .translateY{
                animation: translateY 2s infinite linear;
            }
            /*skew*/
            @keyframes skew{
                0% {transform: skew(0deg,0deg);}
                100% {transform: skew(20deg,20deg);}
            }
            .skew{
                animation: skew 2s infinite linear;
            }

            @keyframes skewX{
                0% {transform: skewX(0deg);}
                100% {transform: skewX(20deg);}
            }
            .skewX{
                animation: skewX 2s infinite linear;
            }
            @keyframes skewY{
                0% {transform: skewY(0deg);}
                100% {transform: skewY(20deg);}
            }
            .skewY{
                animation: skewY 2s infinite linear;
            }
            /*scale*/
            @keyframes scale{
                0%   {transform:scale(0.1,0.1);}	
                100%   {transform:scale(1,1);}
            }
            .scale{
                animation:scale 2s infinite linear;
            }

            @keyframes scaleX{
                0%   {transform:scaleX(0.1);}	
                100%   {transform:scaleX(1);}
            }
            .scaleX{
                animation:scaleX 2s infinite linear;
            }

            @keyframes scaleY{
                0%   {transform:scaleY(0.1);}	
                100%   {transform:scaleY(1);}
            }
            .scaleY{
                animation:scaleY 2s infinite linear;
            }
            /*rrotateotate*/
            @keyframes rotate{
                0%{transform: rotate(0deg);}
                100%{transform: rotate(360deg);}
            }
            .rotate{
                animation: rotate 2s infinite linear;
            }
            @keyframes rotateX{
                0%{transform: rotateX(0deg);}
                100%{transform: rotateX(360deg);}
            }
            .rotateX{
                animation: rotateX 2s infinite linear;
            }
            @keyframes rotateY{
                0%{transform: rotateY(0deg);}
                100%{transform: rotateY(360deg);}
            }
            .rotateY{
                animation: rotateY 2s infinite linear;
            }
        </style>
    </head>
    <body>
    <div class="item">
        <div class="item1">
            <img src="img/3.jpg" class="translate">
            <img src="img/3.jpg" class="translateX">
            <img src="img/3.jpg" class="translateY">
        </div>

        <div class="item2">
            <img src="img/3.jpg" class="skew">
            <img src="img/3.jpg" class="skewX">
            <img src="img/3.jpg" class="skewY">
        </div>

        <div class="item3">
            <img src="img/3.jpg" class="scale">
            <img src="img/3.jpg" class="scaleX">
            <img src="img/3.jpg" class="scaleY">
        </div>
        
        <div class="item4">
            <img src="img/3.jpg" class="rotate">
            <img src="img/3.jpg" class="rotateX">
            <img src="img/3.jpg" class="rotateY">
        </div>
    </div>
    </body>
</html>

2.3 transition（过渡）

专门做过渡动画的，比如一些放大缩小，隐藏显示等。

（1）transition语法

值	功能
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-property	指定CSS属性的name，transition效果
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

（2）属性和属性值

transition-duration：效果需要指定多少秒或毫秒才能完成

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
            body{
                margin: 0px;
                padding: 0px;
                background-color: rgb(204, 204, 204);
            }
            img{
                width: 200px;
                height: 200px;
                border-radius: 50%;
            }
            div{
                margin: 100px;
                text-align: center;
            }
            img{
                width: 100px;
                height: 100px;
                border-radius: 50%;
                transition-duration: 2s;
            }
            img:hover{
                width: 200px;
                height: 200px;
            }
</style>
</head> 
<body>
<div>
    <img src="img/3.jpg">
</div>
</body>
</html>

transition-property：指定CSS属性的name，transition效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
            body{
                margin: 0px;
                padding: 0px;
                background-color: rgb(204, 204, 204);
            }
            img{
                width: 200px;
                height: 200px;
                border-radius: 50%;
            }
            div{
                margin: 100px;
                text-align: center;
            }
            img{
                width: 100px;
                height: 100px;
                border-radius: 50%;
                transition-duration: 2s;
                transition-property: width;/*只给width加动画*/
                /*transition-property默认属性值为all，即给width和height都加动画。*/
            }
            img:hover{
                width: 200px;
                height: 200px;
            }
</style>
</head> 
<body>
<div>
    <img src="img/3.jpg">
</div>
</body>
</html>

transition-timing-function：指定transition效果的转速曲线。改变动画在每一帧的快慢。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
            body{
                margin: 0px;
                padding: 0px;
                background-color: rgb(204, 204, 204);
            }
            img{
                width: 200px;
                height: 200px;
                border-radius: 50%;
            }
            div{
                margin: 100px;
                text-align: center;
            }
            img{
                width: 100px;
                height: 100px;
                border-radius: 50%;
                transition-duration: 2s;
                transition-property:all;
                transition-timing-function: ease-in-out;/*慢进慢出*/
            }
            img:hover{
                width: 200px;
                height: 200px;
            }
</style>
</head> 
<body>
<div>
    <img src="img/3.jpg">
</div>
</body>
</html>

transition-delay：定义transition效果开始的时候

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
            body{
                margin: 0px;
                padding: 0px;
                background-color: rgb(204, 204, 204);
            }
            img{
                width: 200px;
                height: 200px;
                border-radius: 50%;
            }
            div{
                margin: 100px;
                text-align: center;
            }
            img{
                width: 100px;
                height: 100px;
                border-radius: 50%;
                transition-duration: 2s;
                transition-property:all;
                transition-timing-function: ease-in-out;/*慢进慢出*/
                transition-delay:1s ;/*1s后执行动画*/
            }
            img:hover{
                width: 200px;
                height: 200px;
            }
</style>
</head> 
<body>
<div>
    <img src="img/3.jpg">
</div>
</body>
</html>