黄舟2017-04-17 11:58:36
<!DOCTYPE html>
<html>
<head>
<style>
p
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 1s infinite;
-moz-animation:mymove 1s infinite; /* Firefox */
-webkit-animation:mymove 1s infinite; /* Safari and Chrome */
-o-animation:mymove 1s infinite; /* Opera */
animation-direction: alternate;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-moz-keyframes mymove /* Firefox */
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}
@-o-keyframes mymove /* Opera */
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p></p>
</body>
</html>
Run the above code and change it to w3school.
The link is: http://www.w3school.com.cn/cs...
高洛峰2017-04-17 11:58:36
After placing the triangle image, use the class to control the action.
For example
.move {
-webkit-animation-name:'example';
// other code
}
@-webkit-keyframes 'example' {
0% {
-webkit-transform: translateX(0);
}
50% {
-webkit-transform: translateX(100px);
}
100% {
-webkit-transform: translateX(0);
}
}
// 补充说明：
-webkit-animation-name:'xxx';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 10s;/*动画持续时间*/
-webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: 2s;/*动画延迟时间*/
-webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*
巴扎黑2017-04-17 11:58:36
The animation effect of CSS3 is mainly achieved through transition. Use animate to define a tween animation, and the browser will automatically render according to the set time. The code of the two masters above has been perfected, and the subject owner can modify it according to his/her own needs