CSS3 可以创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。
关键帧将控制CSS3中的中间动画步骤。
带有左动画的关键帧
@keyframes animation { from {background-color: pink;} to {background-color: green;} } div { width: 100px; height: 100px; background-color: red; animation-name: animation; animation-duration: 5s; }
上面的示例使用关键帧语法显示了动画的高度,宽度,颜色,名称和持续时间。
<html> <head> <style type="text/css"> h1 { -moz-animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; } @-moz-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } } @-webkit-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } } </style> </head> <body> <h1>Tutorials Point</h1> <p>this is an example of moving left animation .</p> <button onclick="myFunction()">Reload page</button> <script> function myFunction() { location.reload(); } </script> </body> </html>
它将产生以下输出-
链接:https://www.learnfk.comhttps://www.learnfk.com/css/css3-animation.html
来源:LearnFk无涯教程网
<html> <head> <style type="text/css"> h1 { -moz-animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; } @-moz-keyframes slidein { from { margin-left:100%; width:300% } 75% { font-size:300%; margin-left:25%; width:150%; } to { margin-left:0%; width:100%; } } @-webkit-keyframes slidein { from { margin-left:100%; width:300% } 75% { font-size:300%; margin-left:25%; width:150%; } to { margin-left:0%; width:100%; } } </style> </head> <body> <h1>Tutorials Point</h1> <p>This is an example of animation left with an extra keyframe to make text changes.</p> <button onclick="myFunction()">Reload page</button> <script> function myFunction() { location.reload(); } </script> </body> </html>
它将产生以下输出-
链接:https://www.learnfk.comhttps://www.learnfk.com/css/css3-animation.html
来源:LearnFk无涯教程网
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)