slide up and slide down animations

Doyin Atobaru answered on June 17, 2021 Popularity 1/10 Helpfulness 1/10

answer slide up and slide down animations

slide up and slide down animations

Comment

<div className="cookie-consent transition-all duration-500 ease-out opacity-0 translate-y-[-20px]"></div>  

.cookie-consent {
    animation: slideUp 1s ease-out forwards;
  }

  @keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        transform: translateY(-20px);
    }
  }

 

.reload-btn {
        animation: slideDown 1s ease-out forwards;
    }
    @keyframes slideDown {
        0% {
            opacity: 0;
            transform: translateY(-20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

Popularity 1/10 Helpfulness 1/10 Language css

Source: Grepper

Tags: css slide

Link to this answer
Share Copy Link

Contributed on Apr 21 2025

Doyin Atobaru

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

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 1/10 Language css

Source: Grepper

Tags: animation anim

Link to this answer
Share Copy Link

Contributed on Oct 18 2022

Dhaval Italiya

0 Answers Avg Quality 2/10

download files from URL

Comment

export const handleDownload = async (fileUrl: string, fileName?: string) => {
  try {
    const response = await fetch(fileUrl);
    const blob = await response.blob();
    const url = window.URL.createObjectURL(blob);

    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', fileName || 'proof-download');
    document.body.appendChild(link);
    link.click();
    link.remove();

    // Clean up
    window.URL.revokeObjectURL(url);
  } catch (error) {
    console.error('Download failed:', error);
  }
};

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: download javascript url

Link to this answer
Share Copy Link

Contributed on Apr 11 2025

Doyin Atobaru

0 Answers Avg Quality 2/10

slide up and slide down animations

Contents

More Related Answers