A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 如此深情 初级黑马   /  2019-4-9 14:30  /  1079 人查看  /  1 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。

1. 用keyframes 定义动画(类似定义类选择器)
.先定义动画(动画序列,各个状态时的样式) 然后在需要的元素里调用动画
代码格式参考:
@keyframes 动画名称 {
   0%{
        width:100px;
   }
   100%{
        width:200px;
   }
}                        


动画常用属性{控制动画执行}:(!必须属性:动画名称,动画执行时间
属性
描述
@keyframes
规定动画。
animation
所有动画属性的简写属性,除了animation-play-state属性。
animation-name
规定@keyframes动画的名称。(必须的)
animation-duration
规定动画完成一个周期所花费的秒或毫秒,默认是0。(必须的)
animation-timing-function
规定动画的速度曲线,默认是“ease”。
animation-delay
规定动画何时开始,默认是0。
animation-iteration-count
规定动画被播放的次数,默认是1,还有infinite
animation-direction
规定动画是否在下一周期逆向播放,默认是“normal“,alternate逆播放
animation-play-state
规定动画是否正在运行或暂停。默认是"running",还有"paused"。
animation-fill-mode
规定动画结束后状态,保持forwards回到起始backwards

调用动画代码简写:animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态(!必须属性:动画名称,动画执行时间



1 个回复

倒序浏览
666666666666
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马