登录  /  注册
首页 > web前端 > css教程 > 正文

css3动画之transition和animation属性介绍

青灯夜游
发布: 2018-10-11 16:07:19
转载
2781人浏览过

本文给大家介绍实现css3动画的transition和animation属性,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

tradition一共以下有4个属性:

  • transition-property 过渡属性

  • transition-duration 完成动画所需时间,以秒或者毫秒计算

  • transition-timing-function 规定动画变化速度曲线

  • transition-delay 是否延时

transition-property 过渡属性

none:没有属性会获得过渡效果

all:所有属性会获得过渡效果

porperty:width,height...

img{    
    height:15px;    
    width:15px;
}
img:hover{    
    height: 450px;    
    width: 450px;
}
登录后复制

transition的作用在于指定状态变化所需要的时间。

img{
    transition: 1s;
}
登录后复制

transition-duration 完成状态过渡的秒或者毫秒

还可以指定transition的变化属性,例如是width变化还是height

img{
    transition: 1s height;
}
登录后复制

还可以指定多个属性

img{
    transition: 1s height, 1s width
}
登录后复制

transition-delay 状态变化速度。

指定delay参数,使得height先发生变化,然后在让width发生变化:

img{
    transition: 1s height, 1s 1s width
}
登录后复制

delay 真正的意义在于指定了动画发生的顺序,使得多个不同的transition可以在不同的时刻发生形成一种动画效果

transition-timing-function 状态变化速度

默认的是逐渐放慢 ease

可能取值有

  • linear:匀速

  • easy-in:加速

  • ease-out:减速

  • cubic-bezier函数,自定义速度模式

(cubic:立方体的,bezier:贝塞尔曲线 )

cubic-bezier(, , , )取值范围0-1

img{    
    transition-property: height;         
    transition-duration: 1s;    
    transition-delay: 1s;    
    transition-timing-function: ease;
}
登录后复制

注意:transition需要明确知道开始状态和结束状态的具体数值才能计算出中间状态。但是transition没法计算出0->auto的状态,那么就不会产生动画效果。类似情况还有display:none->block和background:url(foo.jpg)->url(bar.jpg)的情况。

它有的缺点:

  1. 需要事件触发,没法在网页加载时候直接发生

  2. 是一次性的,不能重复发生,除非你重复触发它

  3. 只能定义开始状态和结束状态,不能定义中间状态

  4. 一个transition规则,只能定义一个属性的变化

animation

CSS Animation一共有以下属性:

  • animation-name 需要绑定到选择器keyframe的名称

  • animation-duration  完成动画所需时间,以秒或者毫秒计算

  • animation-timing-function 规定动画的速度曲线

  • animaton-delay  动画开始之前延时的时间

  • animation-iteration-count  动画应该播放的次数

  • animation-direction 是否应该轮流反向播放动画

  • animation-fill-mode 属性规定动画播放之后其动态效果是否可见

  • animatoin-play-state 规定动画正在运行还是暂停

iteration-重复

animation-name

animation-duration

首先 设置动画的名称和持续的时长

p:hover{
animation: 1s rainbow;
}
登录后复制

上面代码表示,当鼠标悬停在p元素上时,会产生名为rainbow的动画效果,持续时间为1秒。为此,我们还需要用keyframes关键字,定义rainbow效果。

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

keyframs的写法相当自由

可以用from表示0%,to 表示100%

@keyframs rainbow{
from { background: #c00; }
50% { background: orange; }
to { background: yellowgreen; }
}
登录后复制

如果忽略某个状态,浏览器会自动推算

@keyframs rainbow{
   50% { background: orange; }
     to { background: yellowgreen; }
}

@keyframs rainbow{
to { background: yellowgreen; }
}

@keyframs rainbow{
from, to { background: yellowgreen; }
}
登录后复制

浏览器从一个状态到另外一个状态是平滑过渡到,steps函数实现分步过渡

p:hover {
animation: 1s rainbow infinite steps(10);
}
登录后复制

默认情况下,动画只播放一次。加入infinite关键字,可以让动画无限次播放。

p:hover{
animation: 1s rainbow infinite;
}
登录后复制

除了infinite,还可以设置为具体的次数: 3、5

p:hover{
animation: 1s rainbow 5;
}
登录后复制

animation-fill-mode

动画结束以后会立即冲结束状态回到起始状态,如果想让动画保持在结束状态就要加上animation-fill-mode属性中的forwards

p:hover{
animation: 1s rainbow infinite forwards;
}
登录后复制

animation-fill-mode 有4种取值

none 不改变默认行为

forawads 动画完成后,保持最后一个属性(在最后一个关键帧中定义)

backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。

both 向前向后都进行填充

animation-direction

规定了轮流反向播放动画

alternate:动画会在奇数次(1,3,5...)正常播放,偶数次(2,4,6...)反向播放

最常用alternate和revers,浏览器对其他值的支持不佳

<iframe 
width="100%" height="300" src="//jsfiddle.net/xiaoying/2414dr39/embedded/">
</iframe>
登录后复制

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问 CSS3视频教程

相关推荐:

php公益培训视频教程

CSS在线手册

CSS3在线手册

div/css图文教程

css3特效代码大全

以上就是css3动画之transition和animation属性介绍的详细内容,更多请关注php中文网其它相关文章!

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

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