借鉴css3动画 ‘引用，非原创” CSDN博主「joyouscola」的原创文章

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/>