前端动画 | 易学教程

Css动画

Css动画，可以在许多网页中取代动画图片、Flash动画或者JavaScript。那么在css3中创建动画，就需要用到@keyframes规则了。

在 @keyframes 中创建动画时，把它捆绑到某个选择器，否则不会产生动画效果。而且必须定义动画的名称和时长。在时间方面要用百分比来规定，或用关键词 "from" 和 "to"，等同于 0% 和 100%；0%是动画的开始，100%是动画的完成。然后再在@keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果啦！。那下面就给大家介绍一下所有的动画属性：

animation:所有动画属性的简写属性

animation-name:规定@keyframes动画的名称

animation-duration:动画完成一个周期所花费的秒或毫秒。默认是0

animation-timing-function:动画的速度曲线，默认是”ease”(ease由快到慢, linear恒速, ease-in加速[渐显], ease-out减速[渐隐], ease-in-out先加速后减速)

animation-delay:动画何时开始，默认0

animation-iteration-count：规定动画被播放的次数。默认是 1（interation反复，infinite无限）

animation-direction：动画是否在下一周期逆向地播放。默认是 "normal"（alternate交替的，轮流的）

animation-play-state: 动画是否正在运行或暂停。默认是 "running"。(paused暂停)

animation-fill-mode：规定对象动画时间之外的状态。

复合写法：animation:name 3s ease-in-out 2s infinite alternate;

Jquery动画

举个“栗子”吧：show()、hide()、slideUp()、slideDown()、slideToggle()、fadeIn()、fadeOut()、animate(),这些都是带有动画效果滴！那么最主要的就是animate()方法啦。

animate()方法可以操作多个css属性，但不是所有的css属性都可以操作，虽然是几乎可以。

比如：用到padding-left时要这样写paddingLeft,使用marginRight而不是margin-right。

animate()简单动画

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery-1.11.3.js"></script>
        <style>
            #box{width:100px; height:100px; background:green; position:absolute; left:0;}
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>
<script>
    $(function(){
        $("#box").click(function(){
            $(this).animate({left:"150px"},1000)
        })
    })
</script>

队列功能

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script src="jquery-1.11.3.js"></script>
 7         <style>
 8             #box{width:100px; height:100px; background:green; position:absolute; left:0; top:0;}
 9         </style>
10     </head>
11     <body>
12         <div id="box"></div>
13     </body>
14 </html>
15 <script>
16     $(function(){
17         $("#box").click(function(){
18                 $(this).animate({left:"500px"},1000)
19                 .animate({top:"200px"},1000)
20                 .animate({left:"0"},1000)
21                 .animate({top:"0"},1000)
22         })
23     })
24 </script>

css()排队------callback

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script src="jquery-1.11.3.js"></script>
 7         <style>
 8             #box{width:100px; height:100px; background:green; position:absolute; left:0; top:0;
 9             opacity: .5;}
10         </style>
11     </head>
12     <body>
13         <div id="box"></div>
14     </body>
15 </html>
16 <script>
17     $(function(){
18         $("#box").click(function(){
19             $(this).animate({left:"500px",height:"200px",opacity:"1"},1000)
20             .animate({top:"200px",width:"200px"},1000,function(){
21                 $(this).css("border","5px solid red")
22             })
23             
24         })
25     })
26 </script>

有时候我们做出来的动画会有紊乱的情况，那么别担心，stop()专门解决动画复合问题，加在动画之前就好了

来源：https://www.cnblogs.com/lh101200/p/7660229.html

标签

动画

动漫

animation

css