Home > Article > Web Front-end > What are CSS3 animation properties? How to achieve

What are CSS3 animation properties? How to achieve

云罗郡主forward: 2018-10-16 14:36:282420browse

The content of this article is about what are the CSS3 animation properties? How to implement it has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Transform animation property

The transform property applies a 2D or 3D transformation to an element. This property allows us to rotate, scale, move or tilt the element.

rotate3d(x,y,z,angle) x,y,z attribute 1 rotate around that axis angle deg

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
*{
      margin:0px;
      padding:0px;    
}
img{ display:block;}
.wrap{
      border:1px solid #ff0000;
      width:380px;
      height:565px;
      margin:0 auto;
      position:relative;
      top:50px;   
      -webkit-animation:upDown 2s linear infinite;
}
@-webkit-keyframes upDown{
      0%{-webkit-transform:translateY(0);}     
      50%{-webkit-transform:translateY(20px);}
      100%{-webkit-transform:translateY(0px);}
}
@-webkit-keyframes rota_head{
      0%{-webkit-transform:rotate(0);}    
      50%{-webkit-transform:rotate(-5deg);}
      100%{-webkit-transform:rotate(0);}
}
.head{
      border:1px solid #ff0000;
      position:absolute;
      top:10px;
      left:0;
      z-index:1;   
      -webkit-animation:rota_head 2s linear infinite;
}
@-webkit-keyframes eye_open{
      0%{opacity:1;}
      85%{opacity:1;}
      90%{opacity:0;}     
      100%{opacity:1;}   
}
.eye_open{
      position:absolute;
      top:25px;
      left:40px;
      -webkit-animation:eye_open 2s linear infinite;
}
@-webkit-keyframes eye_close{
      0%{opacity:0;}
      85%{opacity:0;}
      90%{opacity:1;}     
      100%{opacity:0;}   
}
.eye_close{
      position:absolute;
      top:37px;
      left:40px;   
      -webkit-animation:eye_close 2s linear infinite;
 
}
.body{
      position:absolute;top:25px;left:8px;
}
.foot{ position:absolute;left:8px;bottom:0px;}
  </style>
<body>
<div>
      <div>
          <img src="imgs/sprite_43.png" alt="">
        <img src="imgs/shape_45.png" alt="">
        <img src="imgs/shape_46.png" alt="">
    </div>
    <div>
          <img src="imgs/sprite_40.png">
    </div>
    <div>
          <img src="imgs/shape_41.png">
    </div>
</div>
</body>
</html>

The above is the complete introduction. What is the CSS3 animation attribute? How to implement it? If you want to know more about CSS3 video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of What are CSS3 animation properties? How to achieve. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:divcss5.com. If there is any infringement, please contact admin@php.cn delete

Previous article：DIV CSS3 text-shadow font shadow (code example)Next article：DIV CSS3 text-shadow font shadow (code example)

See more

What are CSS3 animation properties? How to achieve

Related articles