css3动画属性详解 与超酷例子

我们用到的css3动画属性有animation和transform，transform主要针对动画瞬间，animation则针对动画的流程。

首先transform的值有

none 定义不进行转换。  
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。  
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。  
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 转换元素定义透视视图。  

animation的值有

animation: name duration timing-function delay iteration-count direction fill-mode play-state;这是简写
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration
 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。
animation-direction 指定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。
initial 设置属性为其默认值
inherit 从父元素继承属性 
下面是一个简单的纯css3写出来的动画效果
图片选择自己喜欢的就好

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flower动画</title>
</head>
<style>
*{margin: 0;padding: 0;}
body,div{margin: 0;padding: 0; 100%;height: 100%;}
a{text-decoration: none;color: #fff;}
.flower{ 250px;height: 250px;position: relative;float: left;margin: 10px 50px;}
.picture img{border:solid 10px; border-radius: 50%;border- 10px; 250px;height: 250px;overflow: hidden;border-color: #fff;}
.cover{ 250px;height: 250px;border-radius: 50%;color: #000;position: absolute;}
.cover h2{padding: 95px 0 0 60px;color: #fff;}
.cover p{padding: 0 0 90px 90px;color: #fff;}
.yellow-flower .cover{top: 10px;left:10px;background: #92ab24;z-index: -100;opacity: 0.7;}
.write-flower .cover{top: 10px;left:10px;background: #6192dc;z-index: -100;opacity: 0.7;}
.green-flower .cover{top: 10px;left:10px;background: #dcbcb0;z-index: -100;opacity: 0.7;}
.red-flower .cover{top: 10px;left:10px;background: #4ba2a7;z-index: -100;opacity: 0.7;}
.pink-flower .cover{top: 10px;left:10px;background:#d88b8b;z-index: -100;opacity: 0.7;}
.purple-flower .cover{top: 10px;left:10px;background: #da7685;z-index: -100;opacity: 0.7;}
.blue-flower .cover{top: 10px;left:10px;background: #a74ba4;z-index: -100;opacity: 0.7;}
.orange-flower .cover{top: 10px;left:10px;background: #7fda76;z-index: -100;opacity: 0.7;}

.yellow-flower:hover .cover{animation:scale 0.5s 1 linear;z-index: 1;}
.yellow-flower:hover .picture{animation:scale1 0.5s 1 linear;z-index: 1;}
@keyframes scale{
0%{transform:scale(0.2);opacity: 1;}
50%{opacity: 0.5;}
100%{transform:scale(1);opacity: 0.7;}
}
@keyframes scale1{
0%{transform:scale(1);}
100%{transform:scale(0);}
}

.write-flower:hover .cover{animation:translate 0.5s 1 linear;z-index: 1;}
@keyframes translate{
0%{opacity: 0;top: -110%;}
10%{}
100%{top:10px;opacity: 0.7;}
}

.green-flower:hover .cover{animation:skew 0.5s 1 linear;z-index: 1;}
@keyframes skew{
0%{opacity: 0;}
50%{transform:rotate3d(0,1,0,180deg);opacity: 1}
100%{opacity: 0.7;}
}

.red-flower:hover .cover{animation:red 0.8s 1 linear;z-index: 1;}
@keyframes red{
0%{opacity: 1;}
35%{transform:translate(100%,0) rotate3d(0,1,0,90deg);transform-origin:0 0; transition:0.3s ease-in-out;}
65%{transform:translate(-10%,0) rotate3d(0,1,0,90deg);transform-origin:0 0; transition:0.3s ease-in-out;}
100%{opacity: 1;}
}

.pink-flower:hover .cover{animation:pink 0.8s 1 linear;z-index: 1;}
.pink-flower:hover .picture{animation:pink1 0.8s 1 linear;z-index: 1;}
@keyframes pink{
0%{transform:scale(0.2);opacity: 1;}
50%{opacity: 0.5;transform:scale(1) rotate(360deg);}
100%{transform:scale(1) rotate(360deg);opacity: 0.7;}
}
@keyframes pink1{
10%{transform:scale(0.8) translate(50%,0) rotate(180deg);}
20%{transform:scale(0.6) translate(150%,0) rotate(180deg);}
30%{transform:scale(0.4) translate(200%,0) rotate(180deg);}
40%{transform:scale(0.2) translate(250%,0) rotate(180deg);}
50%{transform:scale(0.05) translate(300%,0) rotate(180deg);}
60%{transform:scale(0.2) translate(-300%,0) rotate(180deg);}
70%{transform:scale(0.4) translate(-250%,0) rotate(180deg);}
80%{transform:scale(0.6) translate(-200%,0) rotate(180deg);}
90%{transform:scale(0.8) translate(-150%,0) rotate(180deg);}
100%{transform:scale(1) translate(-50%,0) rotate(180deg);}
}

.purple-flower:hover .cover{animation:purple 0.5s 1 linear;z-index: 1;}
.purple-flower:hover .picture{animation:purple1 0.5s 1 linear;z-index: 1;}
@keyframes purple{
0%{transform:scale(1.5);opacity: 0.2;}
20%{transform:scale(1.4);opacity: 0.3;}
40%{transform:scale(1.3);opacity: 0.4;}
60%{transform:scale(1.2);opacity: 0.5;}
80%{transform:scale(1.1);opacity: 0.6;}
100%{transform:scale(1);opacity: 1;}
}
@keyframes purple1{
0%{transform:scale(1);opacity: 1;}
20%{transform:scale(0.8);opacity: 0.8;}
40%{transform:scale(0.6);opacity: 0.6;}
60%{transform:scale(0.4);opacity: 0.5;}
80%{transform:scale(0.2);opacity: 0.3;}
100%{transform:scale(0);opacity: 0;}
}

.blue-flower:hover .cover{animation:blue 0.8s 1 linear;z-index: 1;}
.blue-flower:hover .picture{animation:blue1 0.8s 1 linear;z-index: 1;}
@keyframes blue{
20%{transform:scale(0.2) translate(-300%,300%);opacity: 0;}
50%{transform:scale(0.3) translate(-200%,200%);opacity: 0.4}
70%{transform:scale(0.5) translate(0,0);opacity: 0.7}
100%{transform:scale(0.7) translate(0,0);opacity: 0.8}
}
@keyframes blue1{
20%{transform:scale(0.7) translate(0,0);opacity: 1}
50%{transform:scale(0.5) translate(0,0);opacity: 1}
70%{transform:scale(0.3) translate(250%,-250%);opacity: 0.4}
100%{transform:scale(0.2) translate(350%,-350%);opacity: 0;}
}

.orange-flower:hover .cover{animation:orange 0.5s 1 linear;z-index: 1;}
.orange-flower:hover .picture{animation:orange1 0.5s 1 linear;z-index: 1;}
@keyframes orange{
0%{transform:rotate(180deg);}
20%{transform:rotate(180deg) translate(10%,10%);opacity: 0.9;}
40%{transform:rotate(180deg) translate(20%,20%);opacity: 0.8;}
40%{transform:rotate(180deg) translate(30%,30%);opacity: 0.8;}
60%{transform:rotate(180deg) translate(20%,20%);opacity: 0.7;}
80%{transform:rotate(180deg) translate(10%,10%);opacity: 0.6;}
100%{transform:rotate(180deg) translate(0,0);opacity: 0;}
}
@keyframes orange1{
0%{transform:rotate(180deg);}
20%{transform:rotate(180deg) translate(-10%,-10%);opacity: 0.9;}
40%{transform:rotate(180deg) translate(-20%,-20%);opacity: 0.8;}
40%{transform:rotate(180deg) translate(-30%,-30%);opacity: 0.8;}
60%{transform:rotate(180deg) translate(-20%,-20%);opacity: 0.7;}
80%{transform:rotate(180deg) translate(-10%,-10%);opacity: 0.6;}
100%{transform:rotate(180deg) translate(0,0);opacity: 0;}
}
</style>
<body>
<div class="content">
<div class="yellow-flower flower">
<div class="picture">
<img src="img/flash.jpg" alt="图片无法加载">
</div>
<div class="cover">
<h2><a href="#">Come here</a></h2>
<p><a href="#">you can</a></p>
</div>
</div>
<div class="write-flower flower">
<div class="picture">
<img src="img/flash7.jpg" alt="图片无法加载">
</div>
<div class="cover">
<h2>Come here</h2>
<p>you can</p>
</div>
</div>
<div class="green-flower flower">
<div class="picture">
<img src="img/flash2.jpg" alt="图片无法加载">
</div>
<div class="cover">
<h2>Come here</h2>
<p>you can</p>
</div>
</div>
<div class="red-flower flower">
<div class="picture">
<img src="img/flash3.jpg" alt="图片无法加载">
</div>
<div class="cover">
<h2>Come here</h2>
<p>you can</p>
</div>
</div>
<div class="pink-flower flower">
<div class="picture">
<img src="img/flash4.jpg" alt="图片无法加载">
</div>
<div class="cover">
<h2>Come here</h2>
<p>you can</p>
</div>
</div>
<div class="purple-flower flower">
<div class="picture">
<img src="img/flash5.jpg" alt="图片无法加载">
</div>
<div class="cover">
<h2>Come here</h2>
<p>you can</p>
</div>
</div>
<div class="blue-flower flower">
<div class="picture">
<img src="img/flash6.jpg" alt="图片无法加载">
</div>
<div class="cover">
<h2>Come here</h2>
<p>you can</p>
</div>
</div>
<div class="orange-flower flower">
<div class="picture">
<img src="img/flash1.jpg" alt="图片无法加载">
</div>
<div class="cover">
<h2>Come here</h2>
<p>you can</p>
</div>
</div>
</div>
</body>
</html>

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/gongyijie/p/7886818.html