本文摘自PHP中文网,作者青灯夜游,侵删。
@keyframes是CSS的一种规则,可以用来定义CSS动画的一个周期的行为,创建简单的动画。css @keyframes
作用:通过 @keyframes 规则,您能够创建动画。
说明:
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。在动画过程中,您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。0% 是动画的开始时间,100% 动画的结束时间。为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定。
css @keyframes的使用示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <!DOCTYPE html>
< html >
< head >
< style >
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
</ style >
</ head >
< body >
< p >< b >注释:</ b >本例在 Internet Explorer 中无效。</ p >
< div ></ div >
</ body >
</ html >
|
效果图:
以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目!!!
以上就是@keyframes是什么的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
::before有什么作用?::before与:before的区别是什么?
css border-right-style属性怎么用
css命名规范是什么
css中隐藏的是什么命令
手把手教你使用img标签添加图片效果(知识)
你一定要知道的css属性值规范
css中的流式布局是什么意思
css box-sizing属性怎么用
css如何改变字体粗细
你所不知道的css规则,值得收藏!!
更多相关阅读请进入《@keyframes》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » @keyframes是什么