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

css transition slide down

Prickly Pigeon answered on June 23, 2022 Popularity 9/10 Helpfulness 4/10

answer css transition slide down

css transition slide down

Comment

* {
  margin:0;
  padding:0;
  font-family:"Helvetica Neue", Helvetica, Sans-serif;
  word-spacing:-2px;
}

h1 {
  font-size:40px;
  font-weight:bold;
  color:#191919;
  -webkit-font-smoothing: antialiased;
}

h2 {
  font-weight:normal;
  font-size:20px;
  color:#888;
  padding:5px 0;
}

.message {
background:#181818;
color:#FFF;
position: absolute;
top: -250px;
left: 0;
width: 100%;
height: 250px;
padding: 20px;
transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: hidden;
box-sizing: border-box;
  
}

.message h1 {
  color:#FFF;
}

#toggle {
  position:absolute;
  appearance:none;
  cursor:pointer;
  left:-100%;
  top:-100%;
}

#toggle + label {
  position:absolute;
  cursor:pointer;
  padding:10px;
  background: #26ae90;
width: 100px;
border-radius: 3px;
padding: 8px 10px;
color: #FFF;
line-height:20px;
font-size:12px;
text-align:center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
  margin:20px 50px;
  transition:all 500ms ease;
}
#toggle + label:after {
  content:"Open" 
}

.container {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  padding:5em 3em;
}

#toggle:checked ~ .message {
  top: 0;
}

#toggle:checked ~ .container {
  margin-top: 250px;
}

#toggle:checked + label {
  background:#dd6149;
}

#toggle:checked + label:after {
  content:"Close"
}

Popularity 9/10 Helpfulness 4/10 Language css

Source: www.codingninjas.com

Tags: css slide transition

Link to this answer
Share Copy Link

Contributed on Sep 20 2022

Prickly Pigeon

0 Answers Avg Quality 2/10

Closely Related Answers

css transition slide up

Comment

//Method 1:Using translateY() can make an an element go up(negative values) or down(positive values)
.slides-up{
	transform: translateY(-200px)
}
//Method 2: Using translate(X Y)
.slides-up{
	transform: translate(0 -200px)
}
//Method 3: Using translate3d(X Y Z)
.slides-up{
	transform: translate3d( 0 -200px 0)
}

Popularity 9/10 Helpfulness 7/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Jun 23 2022

Hershey's

0 Answers Avg Quality 2/10

css transition slide down

Contents

More Related Answers

css transition slide down

Closely Related Answers

css transition slide up

Grepper

Documentation

Social

Legal

Contact

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