您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容主要讲解“分析CSS动画Transition与Animation”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“分析CSS动画Transition与Animation”吧!
CSS3 | 差异 |
---|---|
transition | 在给定的持续时间内平滑地更改属性值(从一个值到另一个值),也就是只需要指定开始与结束的参数,参数改变时就触发动画。 |
常用语鼠标事件(:hover 、active 、:focus 、:click )或键盘输入时触发 | |
需要事件触发,无法在网页加载时自动发生。一次性,不能重复发生,除非一再触发。 | |
只能定义开始状态和结束状态,不能定义中间状态。 | |
animation | 可以自行写动画开始、进行间、结束时各阶段的变化,适合用来做较细微的动画表现。需要明确的指定关键帧(@keyframe )的参数。 |
网页加载时会直接执行,可以自行控制各阶段动画的变化 |
animation
和transition
最大的不同在于transition
是当参数改变时触发,而animation
则是直接就执行,所有动画效果需要明确的指定关键帧的参数。
CSS3 | 简写顺序 |
---|---|
transition | property 名称timing-function 特效 |
animation | name 名称timing-function 特效 |
iteration-count 次数fill-mode 填充模式 |
transition
写法.box { width: 100px; height: 100px; background-color: purple; transition: width 2s ease-in 2s; } .box:hover { width: 200px; height: 200px; background-color: red; }
animation
写法.box { width: 100px; height: 100px; border: 1px solid #ccc; animation: change 5s; /*8个属性中至少要有名称、时间*/ } /*设定开始与结束状态*/ /*from 就是0%,to 就是100%*/ @keyframes change { from { background-color: #4BC0C8; } to { background-color: #C779D0; } }
.box { width: 100px; height: 100px; border: 1px solid #ccc; animation: change 5s; /*8个属性中至少要有名称、时间*/ } /*设定开始与结束状态*/ /*from 就是0%,to 就是100%*/ @keyframes change { 0% { background-color: #4BC0C8; } 20% { background-color: #C779D0; } 60% { background-color: #FEAC5E; } 80% { background-color: #185a9d; } 100% { background-color: #4BC0C8; } }
属性 | 值 |
---|---|
animation-name | @keyframes 后的名称 |
animation-duration 时间 | time 以秒计算,如3s initial 预设值inherit 继承父层 |
animation-timing-function 特效 | linear 等速、ease 、ease-in 、ease-out 、ease-in-out 、step-start 、step-end 、steps(int,start/end) 、cubic-bezier(n,n,n,n) 可上官网取值使用 |
animation-delay | 以秒计算,如2s |
animation-iteration-count 次数 | number 预设值为1 ,因此填2 时,动画跑的次数为1+2=3 次infinite 无限循环 |
animation-direction 方向 | normal 、reverse 反向、alternate 先反后正 |
animation-fill-mode | forwards 使用关键帧最后的值backwards 使用最开始的值both |
animation-play-state 播放状态 | pause 暂停running 为预设值initial 预设值、inherit 继承父层 |
到此,相信大家对“分析CSS动画Transition与Animation”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。