在w3c中介绍animation 属性是一个简写属性,用于设置六个动画属性:
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
css部分,样式包含动画效果
<style>
*{
margin:0;
padding:0;
}
.farbox{
width: 500px;
height: 500px;
background-color: palegreen;
margin:50px auto;
position:relative;
overflow: hidden;
}
.box{
width:100px;
height:100px;
position:absolute;
left:0;top: 0;
/* 3D的空间 */
transform-style: preserve-3d;
/* 为了方便观察让3D舞台转动角度 */
transform:rotateX(0) rotateY(0);
animation: video 16s 3s infinite linear;
/* 动画名称video 动画时间16秒 动画延迟3秒 动画次数无限
动画的速度曲线线性的 不设置默认动画正向的
*/
}
.box div{
width:100px;
height:100px;
text-align: center;
line-height:100px;
font-size: 100px;
font-weight:bolder;
color:#fff;
/* 让6个面全部定位在父元素里面 */
position:absolute;
left:0;top:0;
/* 透明 */
opacity:0.5;
border:2px solid #000;
/* 使背面不可见! */
backface-visibility:hidden;
}
.con1{
/* 第一个面往前走 */
background:red;
transform:translateZ(50px);
}
.con2{
/* 第二个面往后走 */
background:blue;
transform:translateZ(-50px) rotateY(180deg);
/*rotateY(180deg) 让正面朝外*/
}
.con3{
/* 先往上位移50px 再绕着X轴转动90deg */
background:pink;
transform:translateY(-50px) rotateX(90deg);
}
.con4{
/* 先往下位移50px,再绕着X轴转动90deg */
background:green;
transform:translateY(50px) rotateX(-90deg);
}
.con5{
/* 先往左位移50px , 再绕着Y轴转动90deg */
background:rosybrown;
transform:translateX(-50px) rotateY(-90deg);
}
.con6{
/* 先往右侧位移50px,再绕着Y轴转动90deg */
background:#000;
transform:translateX(50px) rotateY(90deg);
}
.box img{
width:100%;
height:100%;
}
@keyframes video {
0% {
transform: translate(0,0) rotateY(0deg) rotateY(0deg);
}
25% {
transform: translate(400px,0) rotateY(360deg)
rotateX(0deg);
/* 向右平移400px,并且绕y轴顺时针旋转1周 */
}
50% {
transform: translate(400px,400px) rotateY(360deg)
rotateX(-360deg);
/* 向下平移400px,并且绕x轴逆时针旋转1周 */
}
75% {
transform: translate(0px,400px) rotateY(0deg)
rotateX(-360deg);
/* 向左平移400px,并且绕y轴逆时针旋转1周 */
}
100% {
transform: translate(0px,0px) rotateY(0deg)
rotateX(0deg);
/* 向上平移400px,并且绕x轴顺时针旋转1周 */
}
}
.farbox:hover .box{
/* 鼠标滑过动画暂定 */
animation-play-state:paused;
}
</style>
html部分
<body>
<div class="farbox">
<div class="box">
<div class="con1">1</div>
<div class="con2">2</div>
<div class="con3">3</div>
<div class="con4">4</div>
<div class="con5">5</div>
<div class="con6">6</div>
</div>
</div>
</body>