css的动画效果主要分为三类
①transition
②transform
③animation
transition
①transition-propertty:设置对象中的参与过渡的属性
属性值是:
all:所有可以进行过渡的css属性
none:不指定过渡的css属性
property:指定要进行过渡的css属性
②transition-duration:设置对象过渡的持续时间,主要以S为单位
③transition-timing-function:设置对象中过渡的类型
transition-timing-function属性值
linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
④transition-delay:设置对象延迟过渡的时间
transform
rotate:设置元素顺时针旋转的角度,用法是:
transform: rotate(x);
参数x必须是以deg结尾的角度数或0。
scale:设置元素放大或缩小的倍数,用法包括:
transform: scale(a); 元素x和y方向均缩放a倍
transform: scale(a, b); 元素x方向缩放a倍,y方向缩放b倍
translate:设置元素的位移,用法为:
transform: translate(a, b); 元素x方向位移a,y方向位移b
transform: translateX(a); 元素x方向位移a,y方向不变
transform: translateY(b); 元素y方向位移b,x方向不变
skew:设置元素倾斜的角度,用法包括:
transform: skew(a, b); 元素x方向逆时针倾斜角度a,y方向顺时针倾斜角度b
transform: skewX(a); 元素x方向逆时针倾斜角度a,y方向不变
transform: skewY(b); 元素y方向顺时针倾斜角度b,想方向不变
以上的参数均必须是以deg结尾的角度数或0,可为负数表示反向。
origin
设置元素的悬挂点,用法包括:
transform-origin: a b; 元素的悬挂点为(a, b)
元素的悬挂点即为它旋转和倾斜时的中心点。取值中的a、b可以是长度值、以%结尾的百分比或者left、top、right、bottom四个值。
animation
animation-name
指定选用的动画的名字,即keyframes中的NAME。
animation-duration
同transition-duration。
animation-timing-function
同transition-timing-function。
animation-delay
同transition-delay。
animation-iteration-count
设定动画执行的次数,其值可以是数字也可以是infinite(循环执行)。
animation-direction
设定动画执行的方向,其值可以是normal(正常顺序播放)或alternate(反向播放)。
<style>
div{
width: 500px;
height: 500px;
border-radius: 50%;
background-image:ur1(img/165281/2_120733213487_2.jpg);
background-size:500px;
position: absolute;
top: 15%;
left: 25%;
animation: deg 2s linear,run 0.1s linear 2s infinite;
}
@keyframes runf
from{
transform: rotate (odeg);
}
to{
transform: rotate (360deg) ;
}
@keyframes deg{
0%{
transform: scale(0.1);
}
100%{
transform: scale(1);
}
}
<style/>