CSS3属性(过渡,2D变换,3D变换,动画)
在CSS3中,我们如果不使用JS代码,或者flash动画,想要实现元素从A状态变成B状态,并且中间的过程可以被观察到,那么可以使用过渡属性:transitiont |
---|
transiton-timing-function:过渡运动曲线
ease : 由快到慢(默认值)
linear: 匀速运动
ease-in: 加速运动
ease-out: 减速运动
ease-in-out:先加速后减速
1.利用2D平移实现定位元素居中
div {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
//先走父盒子的一半,再往回走自己的一半,即可实现居中
//但是上面这种方法有一个问题,但元素的宽高发生了改变,那么对应的赋值数据也要改变,比较麻烦。
}
2.利用translate来实现不需要每次都改变代码的居中方式。
div {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50% , -50%);
//如果使用百分比作为单位,那么位移的距离则是以元素本身的宽高作为参照计算。
//此时不管元素的宽高如何发生变化,百分之五十都是自身的一半,不需要做任何修改。
}
3.动画(animation)
使用animation动画属性,必须要声明动画,然后再由元素调用动画
//声明动画语法
@keyframes 动画名称 {
from {
//开始状态
}
to {
//结束状态
}
}
//假设元素div要调用动画
//调用动画语法
div {
animation: 动画名称 动画时间 运动曲线 延迟时间 播放次数 是否反向 ;
}
属性 | 描述 |
---|---|
@keyframes | 定义动画 |
animation-name | 规定 @keyframes 动画的名称。 |
animation-duration | 规定动画完成一个周期所花费的时间。 |
animation-timing-function | 规定动画的速度曲线。默认是 “ease”。 |
属animation-delay性 | 规定动画何时开始。默认是 0。 |
animation-iteration-count | 规定动画被播放的次数。默认是 1。还有 infinite |
animation-direction | 动画是否在下一周期逆向地播放。默认是 “normal”,alternate逆播放 |
nimation-play-state | 规定动画是否正在运行或暂停。默认是 “running”。还有“paused” |
animation-fill-mode | 规定动画结束后状态,保持 forwards 回到起始 backwards |
animation | 所有动画属性的简写属性 |
4.百分比设置多组动画
//除了上面的使用from以及to关键字来声明动画之外,还有一种方式,可以将动画分割为若干个节点。
@keyframes 动画名称 {
0% {
//开始节点
}
50% {
//中间节点
}
100% {
//结束节点
}
}
//调用动画的方式与之前相同。