css - Fade out then Fade in Element using CSS3 Transition -


My question

Is it possible to temporarily hide an element and then X Millisecond CSS3?

Brief description ...

I am currently creating a responsive site on which the sidebar changes the size depending on the size of the screen, such as the navigation icon sidebar.

Before the width of the sidebar size, I would like to erase my navigation icons, and then the sidebar will want to fade them back after the animating is done.

Check out this example:

sidebar example

I have the following steps: <

  • The screen has been changed again
  • Navigation icon fades
  • Navigation icons disappear On the sidebar, the size changes
  • Once the sidebar has resized, the Navigation icon fades back, but this time different styles are applied, so they are small. .. (su Not sure how to do this RT ...)

    • The way I resize the sidebar is as follows: 

      @ Media All and (max-width: 1060 px) {/ * Define Sidebar * / # Sidebar {Width: 60px! Important;} Define sidebar animation * / / * Delay ensures until the mouse icon is missing, its size does not change * / # Sidebar {transition: width 300ms 300mm less;}} < After considering the idea from Mr. Allen, I will send the final animation for your sidebar and navigation. What did you want to achieve in the form of You can check to see it in action, obviously, I have not played with so many values, so there is always the area for improvement. But I think, you will get this idea, @Ben please check Chrome or Safari because I have not placed any other vendor prefix as compared to I-WebChat. You can resize the bela window to check it out :)  
      # sidebar {width: 250px; Webkit-Infection: Width 1s ease; } # NAVIMG {width: 100px; } @ Media all and (max-width: 700px) {# sidebar {width: 100px; } # Nav img {width: 50px; -WebKit-Animation-name: Ibecsmler; -webkit-animation-period: 0.8 s; Webkit-animation-timing function: linear; Webkit-animation-iteration-count: 1; } @ -webkit-keyframes come backsmler {0% {obscurity: 1.0; Width: 100px; } 25% {Opacity: 0.0; Width: 75px; } 50% {Opacity: 0.0; Width: 25px; } 100% {Opacity: 1.0; Width: 50px; }}}

    Comments

    Post a Comment