Answers for "slide from top animation css"

0

css animation slide in from right

<div class="wrapper">
    <img id="slide" src="img.png" />
</div>
<style>
.wrapper {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px; 
    border: 1px solid black;
}

#slide {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}
</style>
Posted by: Guest on March-31-2021
1

css animation slide down

//CSS
* { margin:0; padding:0; }
body { font-family: sans-serif;} 
#content { margin: 50px; } 
a { text-decoration: none; }  
 
.expandable {
  background: #fff;
  overflow: hidden;
  color: #000;   
  line-height: 50px;

  transition: all .5s ease-in-out;
  height: 0;
 }
 
 .expandable:target {
  height: 50px;
}
 
//HTML
<div id="content"> 
  <a href="#nav"><span>Click Here</span></a>
  <div class="expandable" id="nav">
    <p>Cum enim magna parturient</p>
  </div>
  <a href="#nav2"><span>Click Here</span></a>
  <div class="expandable" id="nav2">
    <p>Cum enim magna parturient</p>
  </div>
</div>
Posted by: Guest on April-30-2021

Code answers related to "slide from top animation css"

Browse Popular Code Answers by Language