css中的动态特效
1.translate:移动,是transform的一个方法
transform: translate(50px, 100px);注:参数可以是百分数
2.transform:变形,改变
旋转:rotate() 顺时针旋转给定的角度,允许负值rotate(30deg)
扭曲:skew()元素翻转给定的角度,根据给定的水平线(x轴)和垂直线(Y轴)参数:skew(30deg,20deg)
缩放:scale()放大或缩小,根据给定的宽度(X轴)和高度(Y轴)参数:scale(2,4)
移动:translate()平移,传进x,,y值,代表沿x轴和y轴平移的距离
上边四个的简写:matrix()旋转、缩放移动以及倾斜元素 matrix(scale.x,scale.y,translate.x,translate.y)
改变起点位置: transform-origin: bottom left;
3.transition: 允许css属性值在一定的时间区间内平滑的过渡。(过渡动画)
transition主要包含四个属性值:
(1) 执行变换的属性:transition-property;
(2) 变换延续的时间:transition-duration;
(3) 在延续时间段,变换的速率变化:transition-timing-function //例:平缓进入、先快后慢;
(4) 变换延迟时间: transition-delay
需要事件的触发,例如单击、获取焦点、失去焦点等。
语法:transition: property duration timing-function delay;
例如:transition: width 2s ease 0s;
4.Animation
定义动画:
@keyframes 自定义动画名称 {
from{}
to{}
}
或者
@keyframes 自定义动画名称 {
0%{}
100%{}
}
调用动画animation: 动画名称 动画时间 动画速度 动画延迟 动画次数 动画方向 动画播放状态 动画完成时的状态
动画名称: animation-name
动画时间 animation-duration:2s
动画速度 animation-timing-function: linear(匀速变化) ease(低速开始,然后加快,快结束的时候再放慢) ease-in(低速开始) ease-out(低速结束) ease-in-out(低俗开始,低速结束) steps()
动画延迟 animation-delay:0.1s
动画次数 animation-iteration-count: infinite(无限次)
动画方向 animation-direction:normal默认值。动画应该正常播放。alternate动画应该轮流反向播放。
动画播放状态: animation-play-state: running(开始) pause (暂停)
动画完成时的状态: animation-fill-mode:forwards backwards
例:animation: move 5s linear infinite;
与Transition不同的是:
1.Animation可以通过keyframe显示控制当前帧的属性值,而Transition只能隐式来进行(不能指定每帧的属性值),所以相对而言Animation的功能更加灵活。
2.Animation通过模拟属性值改变来实现动画,动画结束之后元素的属性没有变化;而Transiton确实改变了元素的属性值,动画结束之后元素的属性发生了变化;这一点,这在实际应用中会产生很大的区别。