css使⽤定义动画anima,CSSTransform和动画Transform
CSS3中引⼊的transform属性可以让元素实现变形，旋转，缩放等视觉效果。
2D变化
2D的transform应⽤在x和y轴上，⽽3D的则多了⼀条z轴。
1. Rotate旋转
.box {
transition用法搭配transform: rotate(20deg); //顺时针
}
.box2 {
transform: rotate(-20deg); //逆时针
}
可以将⼀个元素绕着旋转点进⾏0到360度的旋转操作。默认的旋转点是在元素的中⼼点上(50% 50%)。
2. Scale缩放
.box {
transform: scale(.5); //缩⼩为原来的⼀半
}
.box2 {
transform: scale(2); //放⼤为原来的两倍
}
你也可以只针对宽度或者⾼度进⾏缩放操作。
.box {
transform: scaleX(2); //将宽度变为原来的两倍
}
.box2 {
transform: scaleY(.25); //将⾼度变为原来的25%
}
3. Skew 倾斜
.box {
transform: skewX(-5deg); //X轴顺时针旋转5度
}
.box1 {
transform: skewY(20deg); //Y轴逆时针旋转20度
}
.
box3 {
transform: skew(-5deg, 20deg); //同时作⽤在X和Y轴上
}
4. Translate 平移
.box {
transform: translateX(-10px); //在横轴上向左平移10个像素点
}
.box2 {
transform: translateY(20%); //在Y轴上向下平移其⾃⾝⾼度的20%
}
.box3 {
transform: translate(-10px, 20%); //同时在X轴和Y轴上平移
}
5. Matrix矩阵
矩阵形式是将变形函数组合成⼀个矩阵形式进⾏使⽤的，通常都需要借助⼯具。更详细的说明可以参考这⾥。
这些变形模式可以同时作⽤在⼀个元素上。如
.box {
transform: roateX(20deg) skew(20deg, 45deg) translateX(20px) scale(2, 2);
}
Transfrom Origin
默认的变换原点是在元素的中⼼，如果我们想要改变它，可以使⽤属性transform-origin。它接受两个值，分别指定X和Y轴上的位置。可以使⽤px或百分⽐作为单位，也可以使⽤bottom,left等值进⾏定义。
.box {
transform: rotate(15deg);
transform-origin: 0 0; //以左上⾓点为变换点进⾏旋转
}
3D变化
3D是以2D变化为基础的，只是增加了⼀个z轴。这条z轴是可以看做⼀个虚拟垂直与屏幕的坐标轴，它代表在元素的远近距离。其中正值代表离屏幕越近，负值代表离屏幕越远。
Perspective
perspective在中⽂中翻译为透视，这个属性值在应⽤中主要是⽤来指定元素离观看者的距离，值的设定⼀般来说设置为< 300px时会有强烈失真，500~1000px失真中等，2000px以上失真轻微。
定义perspective属性可以选择直接定义在transform中，如：
.box {
transform: perspective(300px) rotateX(20deg);
}
也可以选择定义在⽗元素上，这样，所有⼦元素都将使⽤这个值:
.parent {
perspective: 300px;
}
.child {
transform: rotateX(20deg);
}
perspective-origin
这个属性是叫做“透视原点”，可以使⽤X轴与Y轴的长度数据或百分⽐，以及left/center等值进⾏设置。默认值为50% 50%。可以看做镜头在平⾯上的距离。
backface-visibility
这个属性⽤来控制是否可以看到被挡住的那些⾯，它的值分为visible或hidden。
Transition
transition主要是⽤来做过渡效果的，可以提供使元素间的变化显得不那么⽣硬。
属性
值
作⽤
transition-property
CSS属性值
定义哪些CSS属性会应⽤transition
transition-duration
时间
定义transition的持续时间
transition-timing-function
时间函数：ease|linear|ease-in|step-start等
⽤来控制过渡效果速度函数的
transition-delay
时间
延迟
transition属性的合并⽤法是按照上述的属性顺序进⾏定义的。缺失的将使⽤默认值。
.box {
transition: all .5s ease;
}
Animation & Keyframes
要使⽤CSS动画，需要先定义⼀个关键帧(keyframes)。关键帧指明在特定时间点元素所展⽰出来的样式状态。触发的时间点⽤百分⽐表⽰，其中from关键字相当于0%,to关键字相当于100%。在定义关键帧中元素样式时候,!important关键字会被忽略。
@keyframes animationName {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeFromTo {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
animation的属性有
属性
值
作⽤
animation-name
定义的keyframes名字
⽤来获取定义的动画效果
animation-duration
时间长度
⽤来指定动画从开始到结束所⽤时间
animation-delay
时间长度
延迟时间
animation-iteration-count
数字(可以使⽤⼩数) 或 infinite(⽆限)
动画循环播放次数
animation-timing-function
linear等
定义动画播放函数，⽤以控制播放速度曲线
animation-fill-mode
none,forwards,backwards,both
指定当动画播放结束的时候应⽤到元素上的样式
animation-direction
normal,reverse,alternate,alternate-reverse
控制动画是否反向播放
其简写形式为:
animation : || || || || || || ||
多个动画
当要对⼀个元素添加多个动画效果时，需要⽤，分隔开来，如：.element {
animation: fadeIn 4s 1s infinite linear alternate,
rotate 4s 1s infinite linear alternate;
}
@keyframes fadeIn {
to {
opacity: 0;
}
}
@keyframes rotate {
to {
transform: rotate(180deg);
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。