过渡(transition)
多个属性间使用,隔开
如果所有属性都需要过渡,则使用all关键字
大部分属性都支持过渡效果,注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡(auto不是有效数值,过渡动画效果不会生效)
时间单位:s 和 ms 1s = 1000ms
指定过渡的执行的方式
可选值:
transition-delay: 2s
可以同时设置过渡相关的所有属性,只有一个要求,如果要写延迟,则两个时间中第一个是持续时间,第二个是延迟
动画和过渡类似,都是可以实现一些动态的效果,不同的是过渡需要在某个属性发生变化时才会触发, 动画可以自动触发动态效果。
关键帧语法:
animation-name: 要对当前元素生效的关键帧的名字
animation-name: test
animation-duration: 4s
animation-delay: 2s
可选值:
可选值:
可选值:
可选值:
animation: test 2s 2 1s alternate 和transition 的简写类似 ,执行时间和延时时间顺序注意
变形就是指通过CSS来改变元素的形状或位置.
变形不会影响到页面的布局
transform 用来设置元素的变形效果
transform: translateY(-100px)
平移:平移元素,百分比是相对于自身计算的(px,100%)
z轴平移,调整元素在z轴的位置,正常情况就是调整元素和人眼之间的距离,距离越大,元素离人越近
z轴平移属于立体效果(近大远小),默认情况下网页是不支持透视,如果需要看见效果
, 必须要设置网页的视距
/* 设置当前网页的视距为800px,人眼距离网页的距离 */
perspective: 800px
通过旋转可以使元素沿着x y 或 z旋转指定的角度 开视距效果明显
rotateX()
rotateY()
rotateZ()
单位 角度 deg、 n turn(圈)
**是否显示元素的背面 **
backface-visibility: hidden
一、指代不同
1、animation :属性是一个简写属性,用于设置六个动画属性。
2、transition:属性是一个简写属性,用于设置四个过渡属性。
二、特点不同
1、animation :animation: name duration timing-function delay iteration-count direction规定需要绑定到选择器的 keyframe 名称。规定完成动画所花费的时间,以秒或毫秒计。
2、transition:transition: property duration timing-function delay规定设置过渡效果的 CSS 属性的名称。规定完成过渡效果需要多少秒或毫秒。
三、要求不同
1、animation :请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。
2、transition:始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。
参考资料来源:百度百科- CSS3
参考资料来源:百度百科-CSS语法