码迷,mamicode.com
首页 > 其他好文 > 详细

过度与动画

时间:2018-09-27 15:23:33      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:war   mode   eve   函数   direction   use   bezier   --   hint   

过渡与动画

一、过渡

1、过渡属性

① transition-property 属性 表示可过渡的样式属性
transition-property: all | [css1 [...]];

② transition-duration 属性 表示过渡持续时间
transition-duration: <time>;

③ transition-delay 属性 表示过渡延迟时间
transition-delay: <time>;

④ transition-timing-function 属性 表示过渡运动曲线
transition-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier();
-- linear:匀速
-- ease:慢快慢
-- ease-in-out:慢快慢
-- easa-in:慢快
-- ease-out:快慢
-- cubic-bezier():贝赛尔曲线函数

⑤ transition 属性 表示前四个属性整体赋值
transition: <transition-property> <transition-duration> <transition-delay> <transition-timing-function>;

二、动画

1、动画属性

① animation-name 属性 表示动画名(名字任意起)
animation-name: <name>;

② animation-duration 属性 表示动画持续时间
animation-duration: <time>;

③ animation-delay 属性 表示动画延迟时间
animation-delay: <time>;

④ animation-timing-function 属性 表示动画运动曲线
animation-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier();
-- linear:匀速
-- ease:慢快慢
-- ease-in-out:慢快慢
-- easa-in:慢快
-- ease-out:快慢
-- cubic-bezier():贝赛尔曲线函数

⑤ animation-play-state 属性 表示动画状态
animation-play-state: running | paused
-- running:运行
-- paused:暂停

⑥ animation-fill-mode 属性 表示动画结束后的停留位置
animation-fill-mode: forwards | backwards
-- forwards:终点 
-- backwards:起点

⑦ animation-iteration-count 属性 表示动画次数
animation-iteration-count: <count> | infinite
-- <count>:固定次数
-- infinite:无限次

⑧ animation-direction 属性 表示运动方向
animation-direction: normal | alternate | alternate-reverse;
-- normal:原起点为第一次运动的起点,且永远从起点向终点运动
-- alternate:原起点为第一次运动的起点,且来回运动
-- alternate-reverse:原终点变为第一次运动的起点,且来回运动

2、动画体

@keyframes <name>{
    /*from未写任何属性设置时,默认全部取初始值(初始状态)*/
    from{}
    to{}
}

@keyframes <name>{
    0% {}
    ...
    100% {}
}
v_hint:动画属性设置给指定选择器标签,动画体再样式中单独设置

过度与动画

标签:war   mode   eve   函数   direction   use   bezier   --   hint   

原文地址:https://www.cnblogs.com/jianhaozhou/p/9712921.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!