您的位置:首页 > Web前端 > CSS

css3 过渡、变换与动画

2019-08-03 15:51 197 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/aZF1997/article/details/98316120

过渡属性

通过c3可以在不使用flash动画或js的情况下,
为元素从一种样式变换为另一种样式时添加效果。
而c3过渡就是元素从一种样式逐渐改变为另一种的效果。
要规定两项内容:
规定你希望把效果添加到哪个css属性上; 规定效果的时长

transition-property 规定设置过渡效果的css属性名称
none 没有属性 all所有属性 property 定义过渡效果的css属性名称列表,逗号隔开

transition-duration 规定完成过渡效果需要多少时间
time

transition-timing-function 规定速度效果的速度曲线
linear 匀速 ease慢速开始变快最后变慢ease-in慢速开始 ease-out慢速结束 ease-in-out慢速开始和结束

transition-delay 定义过渡效果何时开始
time

css3的transform属性

transform属性向元素应用2D或3D转换。该属性允许我们对元素进行位移、旋转、缩放或倾斜。

位移 旋转 缩放 倾斜
2D translate(x,y) rotate(angle) scale(x,y) skew(x,y)
3D translate3d(x,y,z) rotate3d(x,y,z,angle) scale3d(x,y,z)

css3动画

@keyframes规则用于创建动画
浏览器支持:IE10,firefox,Opera,Chrome和Safari需要前缀-webkit-
IE9以及更早版本不支持
需要规定至少两项css3动画属性,即可将动画绑定到选择器:
1,规定动画的名称:2,规定动画的时长。

animation属性

animation-name 规定绑定选择器的keyframe名称

animation-duration 规定完成动画所花费的时间,秒或毫秒计
默认为0

animation-timing-function规定动画的速度曲线
linear 匀速 ease慢速开始变快最后变慢ease-in慢速开始 ease-out慢速结束 ease-in-out慢速开始和结束

animation-delay 动画开始之前的延迟

animation-iteration-count 规定动画应该播放的次数
n 定义动画播放次数的数值 infinite 无限次播放

animation-direction 是否应该轮流反向播放动画
normal 默认值 正常播放 alternate 轮流反向播放

animation-play-state 动画的状态
animation-fiu-mode 动画开始前和结束后的其他样式

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: