Breaking News: Grepper is joining You.com. Read the official announcement!

slide up animation css

Dhaval Italiya answered on June 17, 2021 Popularity 10/10 Helpfulness 2/10

answer slide up animation css

slide up animation css

Comment

//HTML

<div class="container">
  <a href="#" class="button">Hide Him!</a>
  <div class="slider">
    <h1>I'm here to be hidden. ;-)</h1>
    <p>Bacon ipsum dolor sit amet swine jerky jowl pork belly sausage brisket, beef ribs meatloaf chuck beef. Flank corned beef prosciutto cow. Pork tail swine meatball brisket cow. Turducken short loin doner pork belly frankfurter flank kevin ball tip meatloaf ham capicola. Tri-tip meatloaf pancetta tenderloin frankfurter shoulder swine turkey porchetta strip steak biltong pork. Bresaola turkey boudin filet mignon spare ribs jowl t-bone kevin tri-tip brisket chuck beef ribs.</p>    
  </div>
</div>


//js
$( document ).ready( function() {
  var button = $('.button');
  var slider = $('.slider');
  
  button.on('click', function(e) {
    
    if ( slider.hasClass('closed') ) {
      button.text('Hide Him!');
      slider.toggleClass('closed');
    } else {
      button.text('No, Bring Him Back!');
      slider.toggleClass('closed');
    }
    
  });
  
}); 


//CSS(SCSS)
@import "compass/css3";

// Slide down effect via css3
// No jQuery animation
// Taken from http://davidwalsh.name/css-slide

.slider {
	overflow-y: hidden;
	max-height: 500px; /* approximate max height */
  box-sizing: border-box;

	transition-property: all;
	transition-duration: .5s;
	transition-timing-function: ease;
}
.slider.closed {
	max-height: 0;
}



// slider styling
.slider {
  background-color: white;
  padding: 0 1em;
  margin: 1em 0;
  border-radius: .2em;
}

// Page styling 
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: skyblue;
  line-height: 1.5;
  padding: 2em;
  color: #666;
}
.container {
  position: relative;
  margin: 0 auto;
  max-width: 480px;
  overflow: visible;
}

h1 {
  font-weight: 100;
  color: #222
}


.button {
  display: block;
  height: 2em;
  background-color: darkslategray;
  text-align: center;
  color: white;
  font-weight: 100;
  font-size: 2em;
  line-height: 2em;
  border-radius: .25em;
  text-decoration: none;
 
  &:hover {
    text-decoration: none;
    background-color: coral;
  }
  &:active {
    text-decoration: none;
    background-color: darken(coral,3%);
  }
}

Popularity 10/10 Helpfulness 2/10 Language css

Source: Grepper

Tags: animation css slide slidedown slideup text

Link to this answer
Share Copy Link

Contributed on Oct 18 2022

Dhaval Italiya

0 Answers Avg Quality 2/10

Closely Related Answers

slide up and down animation css

Comment

.my-div{
  background-color: #f00;
  animation: animationname 2s linear infinite;
  /*animation: animation-name animation-duration animation-direction animation-iteration-count */  
  transition: .5s ease-in-out;
}
@keyframes animationname{
  0%{
    transform: translateX(10px);
  }
  100%{
    transform: translateX(-10px);
  }

Popularity 10/10 Helpfulness 9/10 Language css

Source: Grepper

Tags: animation anim

Link to this answer
Share Copy Link

Contributed on Jun 17 2021

Programming Is Fun

0 Answers Avg Quality 2/10

slide up animation css

Contents

More Related Answers

slide up animation css

Closely Related Answers

slide up and down animation css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.