(1) CSS3 animation application-HTML Tutorial-php.cn

(1) CSS3 animation application

WBOY

Release： 2016-06-24 11:53:15

Original

1587 people have browsed it

@keyframes

Rules are used to create animations.

Specify a certain CSS style in @keyframes to create an animation effect that gradually changes from the current style to a new style

When creating an animation in @keyframes, please bind it to a selection device, otherwise the animation effect will not be produced.

An animation can be bound to a selector by specifying at least two of the following CSS3 animation properties:

Specifying the name of the animation

Specifying the duration of the animation

animation

animation attribute is a shorthand attribute for setting animation attributes:

animation-name: Specifies the name of the @keyframes animation.

animation-duration: Specifies the seconds or milliseconds it takes for the animation to complete one cycle. The default is 0.

animation-timing-function: Specifies the speed curve of animation. The default is "ease".

animation-delay: Specifies when the animation starts. The default is 0

animation-iteration-count: Specifies the number of times the animation is played. The default is 1.

animation-direction: Specifies whether the animation plays in reverse in the next cycle. The default is "normal".

animation-fill-mode: Specify the state outside the object animation time

Sidebar implementation

 1 /* 动画定义 */ 2 @-webkit-keyframes move_right { 3     from { 4         opacity: 0; 5     } 6     to { 7         opacity: 1; 8         -webkit-transform: translateX(120px); 9         transform: translateX(120px);10     }11 }12 @keyframes move_right {13     from {14         opacity: 0;15     }16     to {17         opacity: 1;18         -webkit-transform: translateX(120px);19         transform: translateX(120px);20     }21 }22 @-webkit-keyframes move_left {23     from {24         opacity: 1;25     }26     to {27         opacity: 0;28         -webkit-transform: translateX(-120px);29         transform: translateX(-120px);30     }31 }32 @keyframes move_left {33     from {34         opacity: 1;35     }36     to {37         opacity: 0;38         -webkit-transform: translateX(-120px);39         transform: translateX(-120px);40     }41 }42 @-webkit-keyframes move_up {43     from {44         opacity: 0;45     }46     to {47         opacity: 1;48         -webkit-transform: translateY(-250px);49         transform: translateY(-250px);50     }51 }52 @keyframes move_up {53     from {54         opacity: 0;55     }56     to {57         opacity: 1;58         -webkit-transform: translateY(-250px);59         transform: translateY(-250px);60     }61 }

Copy after login

 1 /* 动画绑定 */ 2 .move_right { 3     -webkit-animation-name            : move_right; 4     animation-name            : move_right; 5     -webkit-animation-duration        : 1s; 6     animation-duration        : 1s; 7     -webkit-animation-iteration-count : 1; 8     animation-iteration-count : 1; 9     -webkit-animation-fill-mode : forwards;10     animation-fill-mode : forwards;11 }12 .move_left {13     -webkit-animation-name            : move_left;14     animation-name            : move_left;15     -webkit-animation-duration        : 1s;16     animation-duration        : 1s;17     -webkit-animation-iteration-count : 1;18     animation-iteration-count : 1;19     -webkit-animation-fill-mode : forwards;20     animation-fill-mode : forwards;21 }22 .move_up {23     -webkit-animation-name            : move_up;24     animation-name            : move_up;25     -webkit-animation-duration        : 1s;26     animation-duration        : 1s;27     -webkit-animation-iteration-count : 1;28     animation-iteration-count : 1;29     -webkit-animation-fill-mode : forwards;30     animation-fill-mode : forwards;31 }32 .fadeIn {33     -webkit-transform : translateX(120px);34     transform : translateX(120px); 35     opacity: 1;36 }37 .fadeInUp {38     -webkit-transform : translateY(-250px);39     transform : translateY(-250px);40     opacity: 1;41     -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out; 42     transition :transform .2s ease-out, opacity .2s ease-out;43 }44 .fadeOutLeft {45     -webkit-transform : translateX(-120px);46     transform : translateX(-120px); 47     opacity: 0.0;48     -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out; 49     transition :transform .2s ease-out, opacity .2s ease-out;50 }

Copy after login

html

 1 <!doctype html> 2 <html lang="en" class="fullHeight"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>demo</title> 6     <link rel="stylesheet" type="text/css" href="sidebar.css"> 7 </head> 8 <body class="fullHeight"> 9     <div class='sidebar fullHeight'>sidebar</div>10     <div class="controller">11         <div>12             <button onclick="fadeIn()">淡进</button>13             <button onclick="fadeOut()">淡出</button>14         </div>15         <div>16             <button onclick="fadeInUp()">向上淡进</button>17             <button onclick="fadeOutLeft()">向左淡出</button>18         </div>19     </div>20     <script src="sidebarEffects.js"></script>21 </body>22 </html>

Copy after login

Add JS

 1 <script> 2 var sidebarEl = document.querySelector(".sidebar"); 3  4 function fadeIn (e) { 5     sidebarEl.className = 'sidebar fullHeight'; 6     sidebarEl.style.top = '0px'; 7     sidebarEl.style.left = '0px'; 8     sidebarEl.classList.add('move_right'); 9 }10 function fadeOut (e) {11     sidebarEl.className = 'sidebar fullHeight';12     sidebarEl.style.left = '120px';13     sidebarEl.classList.add('move_left');14 }15 function fadeInUp(e) {16     sidebarEl.className = 'sidebar fullHeight';17     sidebarEl.style.top = '250px';18     sidebarEl.style.left = '120px';19     sidebarEl.classList.add('move_up');20 21 }22 function fadeOutLeft(e) {23     sidebarEl.className = 'sidebar fullHeight';24     sidebarEl.style.top = '0px';25     sidebarEl.style.left = '120px';26     sidebarEl.classList.add('move_left');27 28 }29 </script>

Copy after login