黄舟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>
運行一下上面的程式碼，改在w3school。
連結為：http://www.w3school.com.cn/cs...
高洛峰2017-04-17 11:58:36
給那個三角圖片 擺好位置後， 用類別去控制動作。
如
.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
css3的動畫效果主要是透過過渡來實現的，用animate來定義一個補間動畫，瀏覽器會自動根據設定的時間來進行渲染。樓上兩位大神的程式碼已經做得很完善了，具體效果題主可以自己依需求修改