您的位置：首页 > Web前端 > CSS

transition和animation做动画（css动画二）

2017-03-07 01:59 766 查看

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！

translate：平移；是transform的一个属性；

transform：变形；是一个静态属性，可以改变元素的形状或位置，做出2d或3d效果；

transition：过渡，转变；使css属性值在一段时间内平滑的变化，需要有触发条件（如hover等），是animation的简化版；

animation：动画；可以设置多帧效果，然后把它们组合变换，按动画效果展示出来；

1. transition

　　过渡，右有四个子属性：

transition-property：过渡属性，默认为all；

transition-duration：过渡效果花费的时间，默认值是0，以秒或毫秒计，不能为负值；

transition-timing-function：定义过渡效果的速度，默认值ease(开始和结束慢，中间快)，可以设置linear(匀速)、ease-in(慢速开始)、ease-out(慢速结束)、ease-in-out(和ease类似，开始和结束慢，但是中间更快)、贝塞尔曲线；

transition-delay：定义过渡延时时间；默认值为0（直接开始），以秒或毫秒计，可为负值；

transition的四个子属性可以缩写，用空格隔开；其中duration（过渡时间）和delay（延时时间）两个值都是时间，当两个值都存在时，第一个是duration（过渡时间），第二个是delay（延时时间）；如果只存在1个时间，那就是duration（过渡时间），delay（延时时间）默认为0；

transition可以同时设置多个属性的过渡效果，用逗号隔开；

transition需要有触发条件，animation则不需要；

　　建议看大神的这篇博文，讲的比较详细，里面还有关于API的东西；

　　

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="base.css"/>
<style type="text/css">
*{padding: 0;margin: 0;}
li{
list-style: none;
}
body{
background: #000;
}
.wrapper{
width: 600px;
height: 600px;
margin: 0 auto;
perspective: 1800px;
}
.demo-container{
position: relative;
width: 600px;
height: 600px;
overflow: hidden;
}
@keyframes boxXuanzhuan{
0%{
transform: rotateX(50deg)rotateZ(170deg)rotateY(50deg);
}
30%{
transform: rotateY(50deg)rotateX(170deg)rotateZ(30deg);
}
60%{
transform: rotateZ(50deg)rotateY(170deg)rotateX(95deg);
}
100%{
transform: rotateX(50deg)rotateZ(170deg)rotateY(66deg);
}
}
.box{
width: 600px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;
/*transition: all 3s;*/
/*transform: rotateX(-134deg)rotateY(64deg);*/
transform-style:preserve-3d;
animation:boxXuanzhuan 30s infinite ease alternate;
}
@keyframes liXuanZhuan{
0%{
background: #acf91a;
color: #00B700;
border-radius: 50%;
width: 50px;
height: 30px;
box-shadow: 0 0 10px #adff2f;
}
30%{
background: #f9641a;
color: #f71af9;
border-radius: 20%;
width: 60px;
height: 50px;
box-shadow: 0 0 10px #818217;
}

70%{
background: #6932bf;
color: #FFFFFF;
border-radius: 50%;
width: 50px;
height: 50px;
box-shadow: 0 0 10px #adff2f;
}
100%{
background: #acf91a;
color: #00B700;
border-radius: 10%;
width: 50px;
height: 30px;
box-shadow: 0 0 10px #adff2f;
}
}
.box li{
background: #00FF99;
position: absolute;
width: 60px;
height: 60px;
left: 50%;
top: 50%;
margin-left: -30px;
margin-top: -30px;
font: 22px/60px "microsoft yahei";
color: #F08787;
border-radius: 50%;
text-align: center;
animation:liXuanZhuan 20s infinite ease alternate;
}
.item1{
transform: translateZ(250px);
}
.item2{
transform: translateZ(-250px);
}
.item3{
transform: rotateY(90deg)translateZ(250px);
}
.item4{
transform: rotateY(-90deg)translateZ(250px);
}
.item5{
transform: rotateY(45deg)translateZ(-250px);
}
.item6{
transform: rotateY(-45deg)translateZ(-250px);
}
.item7{
transform: rotateY(45deg)translateZ(250px);
}
.item8{
transform: rotateY(-45deg)translateZ(250px);
}
.item9{
transform: rotateY(-45deg)rotateX(45deg)translateZ(250px);
}
.item10{
transform: rotateY(-135deg)rotateX(45deg)translateZ(250px);
}
.item11{
transform: rotateY(45deg)rotateX(45deg)translateZ(250px);
}
.item12{
transform: rotateY(135deg)rotateX(45deg)translateZ(250px);
}
.item13{
transform: rotateY(-45deg)rotateX(-45deg)translateZ(250px);
}
.item14{
transform: rotateY(-135deg)rotateX(-45deg)translateZ(250px);
}
.item15{
transform: rotateY(45deg)rotateX(-45deg)translateZ(250px);
}
.item16{
transform: rotateY(135deg)rotateX(-45deg)translateZ(250px);
}
.item17{
transform: rotateX(90deg)translateZ(250px);
}
.item18{
transform: rotateX(-90deg)translateZ(250px);
}

</style>
</head>
<body>
<div class="wrapper">
<div class="demo-container">
<ul class="box">
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
<li class="item8"></li>
<li class="item9"></li>
<li class="item10"></li>
<li class="item11"></li>
<li class="item12"></li>
<li class="item13"></li>
<li class="item14"></li>
<li class="item15"></li>
<li class="item16"></li>
<li class="item17"></li>
<li class="item18"></li>
</ul>
</div>
</div>
</body>
</html>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航