Transformation+transition+animation

Transformation+transition+animation examples

by vaheed akhtar

HTML

<div class="transi"></div>
<hr />
<div class="anim"></div>
<hr />
<div class="transfor"></div>
<hr />
<div class="container">
 <img src="https://www.reduceimages.com/img/image-after.jpg" alt="pic" />
 <div class="overlay">
   <div class="text">I am animated Text</div>
 </div>
</div>

CSS

.transi {
  height: 50px;
  width: 50px;
  background: darkblue;
  transition-property: width;
  transition-duration: 1s;
  transition-delay: 1s;
  transition-timing-function: linear;
}

.transi:hover {
  width: 150px;
}

.anim {
  border: 10px solid grey;
  height: 30px;
  width: 30px;
  background: darkblue;
  position: relative;
}
.anim:hover {
  animation-name: animEx;
  animation-duration: 3s;
}

@keyframes animEx {
  0% { border: 10px solid red; top: 0px; left: 0px; }
  25%{ border: 10px solid purple; top: 0px; left: 150px; }
  50%{ border: 10px solid green; top: 150px; left: 150px; }
  75%{ border: 10px solid red; top: 150px; left: 0px; }
  100%{border: 10px solid red; top: 0px; left: 0px; }
}

.transfor {
  height: 50px;
  width: 50px;
  background: lightgrey;
  transition: width 2s, height 2s, transform 2s;
}
.transfor:hover {
  transform: translate(50px, 50px);
}

/* overlay css */
.container {
  width: 30%;
  position: relative;
}
.container img {
  width: 100%;
}
.overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  overflow: hidden;
  height: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  background: coral;
  transition: 0.5s linear;
}
.text {
  font-size: 20px;
  font-style: italic;
  position: absolute;
}
.container:hover .overlay{
  height: 100%;
}