Question about the effect of making an advertisement bar in css3 ?, Questions about creating an advertisement bar in css3

Question about the effect of making an advertisement bar in css3 ?, Questions about creating an advertisement bar in css3

[Arrangement] Original: https://segmentfault.com/a/1190000007087701

I am a newbie. I am forced to add useless classes during the National Day. Is that my running in the sunset? I am bored with sorting out the materials I learned before. For more information about how to create an advertisement bar, [here] [1]. A move written by the author is used. js plug-in is completed by mobile animation (the focus is the timer setinterval. If someone has code, please send it); the other is completed by jq. The following describes how to implement jquery.

The focus of jquery implementation is the animate method, which is [Official Website] [2].

> ** Definition and usage **
> The animate () method executes the Custom Animation of the CSS property set.
> This method uses the CSS style to change an element from one state to another. The CSS attribute value is gradually changed, so that you can create an animation effect.
> ** Syntax 1 **
> '$ (Selector). animate (styles, speed, easing, callback )'

Below is the detailed code:

Dom structure:

1 <div class = "dbmove" id = "dbmove"> </div> 2 <a href = "javascript: void (0) "class =" dbhide "id =" dbhide "> </a> 3 <a href =" javascript: void (0) "class =" dbshow "id =" dbshow "> </a> 4 css :( dbshow, dohide is similar) 5. dbmove {6 background: url ("db.png") no-repeat 0 0; 7 width: 0px; 8 height: 33px; 9 float: left; 10} 11 jquery: 12 $ (document ). ready (function () {13 $ ('# dbshow '). click (function () {14 $ (this ). hide (); 15 $ ('# dbmove '). animate ({width: 150}, 500, function () {16 $ ('# dbhide '). show (); 17}) 18}) 19 20 $ ('# dbhide '). click (function () {21 $ (this ). hide (); 22 $ ('# dbmove '). animate ({width: 0}, 500, function () {23 $ ('# dbshow '). show (); 24}) 25}) 26 })

 

! [Image description] [3] This is the effect of image resources. Click expand and collapse.

** Next, let's focus on the implementation of CSS3 animation? **
After writing, I want to use css to implement such a function, and then I made a simple Baidu attempt. The Code is as follows:

1 @-webkit-keyframes fadeInRight {2 0% {3 width: 0; 4} 5 100% {6 width: 150px; 7} 8 9} 10. dbmove {11 background: url ("db.png") no-repeat 0 0; 12 width: 0px; 13 height: 33px; 14 float: left; 15 animation-name: fadeInRight; /* animation attribute name, that is, the animation name defined by keyframes */16 animation-duration: 2 s;/* animation duration */17 animation-timing-function: animation-in-out;/* animation frequency, which is the same as transition-timing-function */18 animation-delay: 1 s; /* animation delay time */19 animation-iteration-count: 1;/* define cyclic data, infinite is unlimited */20 animation-direction: normal; /* define the Animation Mode */21}

 

The first thing that comes to mind is the keyframes animation. I have heard of it before and have never written such code. After a successful attempt, the current effect is that the animation is executed once by default, but you do not know how to use JS to control it by clicking, and the animation will be restored, which is not as expected. Hope someone can see it to continue!

Attached: [who is better at JS animation performance than CSS3?] [4]
[CSS3 animation] [5]

[1]: http://www.imooc.com/learn/22
[2]: http://api.jquery.com/animate/
[3]:/img/bVDTYJ
[4]: https://www.zhihu.com/question/33686030
[5]: http://www.w3school.com.cn/css3/css3_animation.asp