登录  /  注册

CSS3 - animation - 说中

php中文网
发布: 2016-05-20 13:49:29
原创
1257人浏览过

css3 animation

定义keyframes

@keyframes colorchange {
    0%   { background-color: #00F; /* from: blue */ }
    25%  { background-color: #F00; /* red        */ }
    50%  { background-color: #0F0; /* green      */ }
    75%  { background-color: #F0F; /* purple     */ }
    100% { background-color: #00F; /* to: blue   */ }
}

@-webkit-keyframes colorchange {
    0%   { background-color: #00F; /* from: blue */ }
    25%  { background-color: #F00; /* red        */ }
    50%  { background-color: #0F0; /* green      */ }
    75%  { background-color: #F0F; /* purple     */ }
    100% { background-color: #00F; /* to: blue   */ }
}
登录后复制

对于0%这个也可以用from关键字来替代,同样的可以用to来代替100%,过渡状态,你可以定义任何百分比

animation应用到元素的属性写法,和transition差不太多

div:hover {
  animation-name: colorchange;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 1s;
  animation-fill-mode:forwards;  /*forwards表示让动画停留在结束状态*/
  animation-direction: normal;
  animation-iteration-count: 3;  /*用来指定动画循环的次数,无限循环用infinite*/
}


/****简写****/
div:hover {
  animation: 1s 1s rainbow linear 3 forwards normal;
}
登录后复制

animation-direction有四个值:

normal:默认,从0%执行到100%

reverse:动画从100%执行到0%

alternate:动画在0%到100%之间往复执行;

alternate-reverse与alternate一致,不过是从100%开始;

animation-play-state

有时,动画播放过程中,会突然停止。这时,默认行为是跳回到动画的开始状态;

如果想让动画保持突然终止时的状态可以使用animation-play-state: running;

浏览器支持

IE 10和Firefox(>= 16)支持没有前缀的animation,而chrome不支持,所以必须使用webkit前缀

也就是说,实际运用中,代码必须写成下面的样子:

div:hover {
  -webkit-animation: 1s rainbow;
  animation: 1s rainbow;  
}

@-webkit-keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}
登录后复制

参考资料:

http://www.zhangxinxu.com/wordpress/2010/11/css3-transitions-transforms-animation-introduction/

http://www.w3cplus.com/content/css3-transform

http://beiyuu.com/css3-animation/

http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号