CSS3的动画效果@keyframes
程序员文章站
2022-05-02 20:30:21
...
定义动画的格式:
@keyframes 动画名称{
阶段1{css样式}
阶段2{css样式}
阶段3{css样式}
}
每个阶段用百分比表示,即从0%到100%
起止必须设置即0%和100%,或者from和to
下列代码中的图片plane在屏幕中,呈W型运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
img{
width: 150px;
-webkit-animation: plane 5s ease-in-out 1s;
-o-animation: plane 15s ease-in-out 1s;
animation: plane 5s ease-in-out 1s;
}
@keyframes plane { /*plane:动画名称*/
0%{
transform: translate(0px,0px);
}
25%{
transform: translate(100px,200px);
}
50%{
transform: translate(200px,00px);
}
75%{
transform: translate(300px,200px);
}
100%{
transform: translate(400px,00px);
}
}
</style>
<title>动画</title>
</head>
<body>
<img src="../../img/plane.jpg" alt="">
</body>
</html>
下一篇: fetch封装
推荐阅读
-
flash中怎么制作打印字幕的文字动画效果?
-
css3的基础用法,新手必看哈(还有css3和jquery动画的对比)_html/css_WEB-ITnose
-
css3实现平移效果(transfrom:translate)的示例
-
AE怎么制作3D金币旋转效果? AE金币转动动画的实现方法
-
原生JS实现的雪花飘落动画效果
-
CSS3贝塞尔曲线示例:创建链接悬停动画效果
-
不到200行代码实现一个不断旋转的椭圆动画效果
-
jquery动画3.创建一个带遮罩效果的图片走廊_jquery
-
一款纯css3实现的超炫动画背画特效_html/css_WEB-ITnose
-
HTML5/CSS3专题 CSS3打造百度贴吧的3D翻牌效果的经典案例