css 动画特效笔记

等一下？？？！！！

怎么没用了？？？

这就很绝望了，编辑器里有用，发布了就没用了。。

我明白了，我的style 标签里的animate 和 @keyframes 都没有了。。。看来博客园不让发这种动画。。。

 

试着把鼠标移动到下面的方块上

css3 动画特效

 这是css代码，根据鼠标覆盖触发动画，改变位置和背景图片，这个方块的元素是id为 bbb 的div

 

#bbb{
 
height: 300px;
width: 300px;
font-size: 50px;
position: relative;
left:0px;
background-image: url('https://www.toptal.com/designers/subtlepatterns/patterns/restaurant.png');
}


#bbb:hover{
    animation: cssAnimate 5s;
    -moz-animation: cssAnimate 5s;
    -o-animation: cssAnimate 5s;
    -webkit-animation: cssAnimate 5s;
}






@keyframes cssAnimate{
    from{
        background-image: url('https://www.toptal.com/designers/subtlepatterns/patterns/restaurant.png');
        left:0px;
    }
    to{
        background-image: url('https://www.toptal.com/designers/subtlepatterns/patterns/footer_lodyas.png');
        left:1000px;
    }
}




/*下面这些东西和上面的都是一样的，只不过是不同版本的浏览器罢了 */

@-moz-keyframes cssAnimate{
    from{
        background-image: url('https://www.toptal.com/designers/subtlepatterns/patterns/restaurant.png');
        left:0px;
    }
    to{
        background-image: url('https://www.toptal.com/designers/subtlepatterns/patterns/footer_lodyas.png');
        left:1000px;
    }
}






@-webkit-keyframes cssAnimate{
    from{
        background-image: url('https://www.toptal.com/designers/subtlepatterns/patterns/restaurant.png');
        left:0px;
    }
    to{
        background-image: url('https://www.toptal.com/designers/subtlepatterns/patterns/footer_lodyas.png');
        left:1000px;
    }
}






@-o-keyframes cssAnimate{
    from{
        background-image: url('https://www.toptal.com/designers/subtlepatterns/patterns/restaurant.png');
        left:0px;
    }
    to{
        background-image: url('https://www.toptal.com/designers/subtlepatterns/patterns/footer_lodyas.png');
        left:1000px;
    }
}

 

 

 

关键词：  @keyframes, from, to,  和      animation

其实还是比较好理解的 ， 把@keyframe 看成js 里的function，和function一样给它取一个名字，例如我取的名字cssAnimate，from和to自然是初始状态和动画完成状态， 然后其他的css属性调用它。

 

 @keyframes 里面除了可以加上  from to 

还可以加上百分比

例如

0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}

这将使其一边绕圈一边改变颜色，也比较好理解

 

 

animation语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;