css animation 使用

对于css 动画，大部分公司都用的比较少，所以只需要了解用法就可以了。如果真有实际的需要，那就交给百度，这样在上网查到的东西能看的懂，那查到的东西，就是自己的东西

animation 语法

首先animation使用要使一个元素有动画效果，先定义一个动画，通过@keyframes定义

@keyframes MYanimation{
    0%   {top:0}	
    50%   {top:100px;left:100px;}	
    100%   {top:50px;left:50px;}
}

/* from 等价 0%  to 100% */
@keyframes MYanimation{
    from   {width:50px;height:50px;}	
    50%   {width:100px;height:100px;}
    50%  {width:150px;}
    to   {width:50px;height:50px;}
}

下面两个50% 帧，如果最终的效果是 width 150px height:100px ,后面有重复的就会覆盖前面的，并且！important在这里面是无效的

再给元素中样式中添加animation，在animation第一个属性值中写上动画的名称

div{
    width:50px;
    height:50px;
    position: relative;
    animation:MYanimaton 2s;
}

animaton 语法是个简写

值	描述
animation-name	设置动画名称，必须与@keyframes 配合使用
animation-duration	动画时间
animation-timing-function	动画过渡类型
animation-delay	动画延迟时间
animation-iteration-count	循环次数
animation-direction	是否反向运动
animation-play-state	动画状态

好了，到此结束了，各个属性的作用大家自行百度，因为我比较懒，这里只有使用方法，不知道对大家有没有帮助。谢谢