CSS3 Animation(下)
三、animation-timing-function:
语法:
- animation-timing-function:ease |
- linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,
- <number>, <number>, <number>) [, ease | linear |
- ease-in | ease-out | ease-in-out | cubic-bezier(<number>,
- <number>, <number>, <number>)]*
复制代码
取值说明:
animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率,说得简单点就是动画的播放方式。他和transition中的transition-timing-function一样,具有以下六种变换方式:ease;ease-in;ease-in-out;linear;cubic-bezier。具体的使用方法大家可以点这里,查看其中transition-timing-function的使用方法。
四、animation-delay:
语法:
- animation-delay: <time>[,<time>]*
复制代码
取值说明:
animation-delay:是用来指定元素动画开始时间。取值为<time>为数值,单位为s(秒),其默认值也是0。这个属性和transition-delayy使用方法是一样的。
五、animation-iteration-count
语法:
- animation-iteration-count:infinite | <number> [, infinite | <number>]*
复制代码
取值说明:
animation-iteration-count是用来指定元素播放动画的循环次数,其可以取值<number>为数字,其默认值为“1”;infinite为无限次数循环。
六、animation-direction
语法:
- animation-direction: normal | alternate [, normal | alternate]*
复制代码
取值说明:
animation-direction是用来指定元素动画播放的方向,其只有两个值,默认值为normal,如果设置为normal时,动画的每次循环都是向前播放;另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。
七、animation-play-state
语法:
- animation-play-state:running | paused [, running | paused]*
复制代码
取值说明:
animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值,running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样,可以通过paused将正在播放的动画停下了,也可以通过running将暂停的动画重新播放,我们这里的重新播放不一定是从元素动画的开始播放,而是从你暂停的那个位置开始播放。另外如果暂时了动画的播放,元素的样式将回到最原始设置状态。这个属性目前很少内核支持,所以只是稍微提一下。
上面我们分别介绍了animation中的各个属性的语法和取值,那么我们综合上面的内容可以给animation属性一个速记法:
- animation:[<animation-name> ||
- <animation-duration> || <animation-timing-function> ||
- <animation-delay> || <animation-iteration-count> ||
- <animation-direction>] [, [<animation-name> ||
- <animation-duration> || <animation-timing-function> ||
- <animation-delay> || <animation-iteration-count> ||
- <animation-direction>] ]*
复制代码
如下图所示
兼容的浏览器
前面我也简单的提过,CSS3的animation到目前为止只支持webkit内核的浏览器,因为最早提出这个属性的就是safari公司,据说Firefox5.0+将支持Animation。那么到此为止,我们主要一起学习了有关animation的理论知识,下面我们一起来看两个实例制作过程,来加强对animation的实践能力
DEMO一:发光变色的button
我们这个demo主要是通过在keyframes中改变元素的background;color;box-shadow三个属性,来达到一种发光变色的button效果,我们来看看其实现代码
HTML Code:
- <a href="" class="btn">发光的button</a>
复制代码
CSS Code
- /*给这个按钮创建一个动名名称:buttonLight,然后在每个时间段设置不同的background,color来达到变色效果,改变box-shadow来达到发光效果*/
- @-webkit-keyframes 'buttonLight' { f
- rom {
- background: rgba(96, 203, 27,0.5);
- -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset, 0 0 3px rgba(220, 120, 200, 0.5);
- color: red;
- }
- 25% {
- background: rgba(196, 203, 27,0.8);
- -webkit-box-shadow: 0 0 10px rgba(255, 155, 255, 0.5) inset, 0 0 8px rgba(120, 120, 200, 0.8);
- color: blue;
- }
- 50% {
- background: rgba(196, 203, 127,1);
- -webkit-box-shadow: 0 0 5px rgba(155, 255, 255, 0.3) inset, 0 0 3px rgba(220, 120, 100, 1);
- color: orange;
- }
- 75% {
- background: rgba(196, 203, 27,0.8);
- -webkit-box-shadow: 0 0 10px rgba(255, 155, 255, 0.5) inset, 0 0 8px rgba(120, 120, 200, 0.8);
- color: black;
- }
- to {
- background: rgba(96, 203, 27,0.5);
- -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset, 0 0 3px rgba(220, 120, 200, 0.5); c
- olor: green;
- }
- }
- a.btn {
- /*按钮的基本属性*/
- background: #60cb1b;
- font-size: 16px;
- padding: 10px 15px;
- color: #fff;
- text-align: center;
- text-decoration: none;
- font-weight: bold;
- text-shadow: 0 -1px 1px rgba(0,0,0,0.3);
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- border-radius: 5px;
- -moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8); -
- webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8);
- box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8);
- /*调用animation属性,从而让按钮在载入页面时就具有动画效果*/
- -webkit-animation-name: "buttonLight"; /*动画名称,需要跟@keyframes定义的名称一致*/
- -webkit-animation-duration: 5s;/*动画持续的时间长*/
- -webkit-animation-iteration-count: infinite;/*动画循环播放的次数*/
- }
复制代码
效果:
为了更好的看出这个demo的效果,你可以把上面的代码复制到你本过的页面上,并使用safari和chrome,你会觉得很有意思,整个按钮好像在不停的呼吸一样。
Demo二:方形旋转变成圆型
我们这个demo是通过transform的rotate和border-radius不同值,把一个方型图片随着时间的推移,慢慢的转换成了个圆型效果,下面我们来看看其具体实现的效果
HTML Code:
- <a href="#" class="box"></a>
- <span class="click-btn">Click</span>
复制代码
CSS Code:
- /*定义方型转化为圆型的动画round*/
- @-webkit-keyframes 'round' {
- from{
- -webkit-transform: rotate(36deg);
- -webkit-border-radius: 2px;
- }
- 10%{
- -webkit-transform: rotate(72deg);
- -webkit-border-radius: 4px;
- }
- 20% {
- -webkit-transform: rotate(108deg);
- -webkit-border-radius: 6px;
- }
- 30% {
- -webkit-transform: rotate(144deg);
- -webkit-border-radius: 9px;
- }
- 40%{
- -webkit-transform: rotate(180deg);
- -webkit-border-radius: 12px;
- }
- 50%{
- -webkit-transform: rotate(216deg);
- -webkit-border-radius: 14px;
- }
- 60% {
- -webkit-transform: rotate(252deg);
- -webkit-border-radius: 16px;
- }
- 70% {
- -webkit-transform: rotate(288deg);
- -webkit-border-radius: 19px;
- }
- 80%{
- -webkit-transform: rotate(324deg);
- -webkit-border-radius: 22px;
- }
- to {
- -webkit-transform: rotate(360deg);
- -webkit-border-radius: 25px;
- }
- }
- /*给方型box一个初步样式*/
- a.box {
- display: block;
- width: 50px; height: 50px;
- background: red;
- margin-bottom: 20px;
- }
- /*圆型box的样式,并在这里应用animation*/
- a.round {
- -webkit-border-radius: 25px;
- -moz-border-radius: 25px; border-radius: 25px;
- background: green;
- -webkit-animation-name: 'round'; /*动画名称*/
- -webkit-animation-duration: 60s;/*播放一次所持续时间*/
- -webkit-animation-timing-function: ease;/*动画播放频率*/
- -webkit-animation-iteration-count: infinite;/*动画播放次涒为无限次*/
- }
- /*click button效果*/
- .click-btn {
- background: rgba(125,220,80,0.8);
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- border-radius: 5px;
- -webkit-box-shadow: inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3);
- -moz-box-shadow: inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3);
- box-shadow: inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3);
- padding: 5px 10px;
- color: #369;
- font-size: 16px;
- font-weight: bold;
- text-align: center;
- text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
- cursor: pointer;
- }
复制代码
jQuery Code:
- <script type="text/javascript">
- $(document).ready(function(){
- $(".click-btn").click(function(){
- $(this).siblings().addClass("round");
- });
- });
- </script>
复制代码
我们载入时box是没有任何动画效果的,当我们点击了click button看给原box上加上一个round的class名,从而触发了一个round的动作。请看效果:
我们这里简单的介绍了两个demo的应用,其实大家可以发挥自己的想像制作出更好更多的动画效果,如果你对animation制作动画很感兴趣,你可以参考这几个网站:webdesignersblog、slodive、impressivewebs这上面有许多特别有意的动画demo。
转载于:https://blog.51cto.com/guangningchen/1034330
CSS3 Animation(下)相关推荐
- 用html怎么制作风车,css3 animation实现风车转动
项目中经常有用到动画效果,比如Loading.风车转动等等.最简单的办法是使用gif,但是gif在半透明背景下有白边,体验不友好,好在现在可以使用css3的anmiation来实现动画效果,极大的提升 ...
- css3 slide动画,css3动画+ slidetoggle不起作用(css3 animation + slidetoggle don't work)
css3动画+ slidetoggle不起作用(css3 animation + slidetoggle don't work) 飞机动画块(他从一边到另一边飞行 - 永远). 可以使用jquery折 ...
- html帧动画效果,HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画
本篇文章探讨了HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < css3里面的animatio ...
- CSS3 animation实现点点点loading动画
一.再续前缘 去年夏天,写了篇名为"CSS3 animation渐进实现点点点等待提示效果"的文章,主要内容是实现类似下面打点等待提示效果,比干巴巴的字符...要更人性化: 之前实 ...
- html帧动画效果,CSS3 animation实现逐帧动画效果
这篇文章主要介绍了CSS3 animation实现逐帧动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被 ...
- html css3风车,css3 animation实现风车转动
项目中经常有用到动画效果,比如Loading.风车转动等等.最简单的办法是使用gif,但是gif在半透明背景下有白边,体验不友好,好在现在可以使用css3的anmiation来实现动画效果,极大的提升 ...
- 实现了一个百度首页的彩蛋——CSS3 Animation简介
在百度搜索中有这样一个彩蛋:搜索"旋转","跳跃","反转"等词语,会出现相应的动画效果(搜索"反转"后的效果).查看源 ...
- CSS3 (animation)
CSS3 animation 动画 实例代码: 属性取值说明: animation: animation-name animation-duration animation-timing-functi ...
- CSS3(animation, trasfrom)总结
CSS3(animation, trasfrom)总结 1. Animation 样式写法: 格式: @-浏览器内核-keyframes 样式名 {} 标准写法(chrome safari不支持 @k ...
- html动画曲线快速结束,CSS3 animation动画
CSS3 animation动画 1.@keyframes 定义关键帧动画 2.animation-name 动画名称 3.animation-duration 动画时间 4.animation-ti ...
最新文章
- 以金山界面库(openkui)为例思考和分析界面库的设计和实现——代码结构(完)
- xml信息管理系统_WPF信息管理系统项目实战教程二:使用XAML实现页面布局
- pybind播放视频
- ubuntu安装USB转串口驱动(PL2303)
- Elasticsearch-head插件的安装与使用
- 递归二叉树的序列打印
- BaiduPan百度网盘不限速教程
- 各种比例尺图幅号计算excel表格
- Git GitHub GitLab 超全面学习笔记 -- 匠心之作
- 你知道java中重载和重写的区别吗?(详细解说)
- 200个计算机局域网适合什么,批处理检测局域网电脑是否开机(200多台电脑,不同网段,最好按主机名称检测)...
- 精品基于Uniapp+SSM实现的公园植物介绍APP
- 说说JDBC 操作数据库的步骤?
- 电脑换固态装系统总结
- IR2184死区时间介绍
- 算法导论(三)--分治法
- [转载]WIFI Direct/WIFI P2P
- erp沙盘采购总监的心得_erp沙盘模拟实验采购总监个人总结
- 【英语-基础词根词缀】
- maven系列:maven依赖讲解