语法:div{animation: 动画名称 一个周期播放时间 速度曲线 延迟时间 下个周期是否逆向}
@keyframes 动画名称{
from{
//do something
}
to{
//do something
}
}
下面的表格列出了 @keyframes 规则和所有动画属性:.
利用transform的动画效果:
1.translate(x,y) 2d,两点之间移动。还可以分开写translateX(x)只移动X 轴的值。translateY(y)只移动Y轴。
2.scale(x,y) 缩放效果
3.rotate(angle) 旋转效果,单位是deg(度)
4.skew(x-angle,y-angle) 倾斜转换
水平移动效果:
@keyframes move{ from{ transform: translateX(0px); } to{ transform: translateX(1000px); } }
水平旋转:
@keyframes move{
from{
transform: rotate(180deg);
} to{ transform: rotate(180deg); } }
垂直旋转:
@keyframes move{
from{
transform: rotateY(180deg);
} to{ transform: rotateY(180deg); } }
@keyframes move{ from{ transform: translateX(0px); } to{ transform: translateX(1000px); } }水平旋转:@keyframes move{
from{ transform: rotate(180deg);} to{ transform: rotate(180deg); } }垂直旋转:@keyframes move{
from{ transform: rotateY(180deg);} to{ transform: rotateY(180deg); } }
例子:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片播放Demo</title>
<style>
.animate{
width:100px;
height:100px;
background:red;
position:absolute;
animation: move .6s infinite alternate;
}
@keyframes move{
from{
transform: rotateY(180deg);
}
to{
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="animate"></div>
</body>
</html>