LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
.contain {
  display: flex;
  align-items: center;
  justify-content: center;
}

#list:hover #listOfItems {
  display: none;
}
#list:hover #lineItemMiddle {
  animation: list-through .3s;
}
#list:hover #lineItemBottom {
  animation: list-through .4s forwards;
  animation-delay: .3s;
  stroke: transparent;
}

#photosVideos:hover polygon:nth-child(1) {
  animation: snapshot 0.3s cubic-bezier(0.1, 0.7, 1, 0.1) forwards;
}
#photosVideos:hover polygon:nth-child(2) {
  animation: snapshot 0.3s cubic-bezier(0.1, 0.7, 1, 0.1) forwards;
  animation-delay: .3s;
}
#photosVideos:hover polygon:nth-child(3) {
  animation: snapshot 0.3s cubic-bezier(0.1, 0.7, 1, 0.1) forwards;
  animation-delay: .6s;
}
#photosVideos:hover polygon:nth-child(4) {
  animation: snapshot 0.3s cubic-bezier(0.1, 0.7, 1, 0.1) forwards;
  animation-delay: .9s;
}

#loggingOut:hover #arrow {
  animation: 0.4s exit-from-app forwards;
}

#loggingOut #arrow {
  transform: translateX(0);
}

@keyframes exit-from-app {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(5px);
  }
}
@keyframes list-through {
  from {
    stroke: transparent;
  }
  to {
    stroke: #000;
  }
}
@keyframes snapshot {
  from {
    fill: transparent;
  }
  to {
    fill: #000;
  }
}
Wed, 12/27/2017 - 06:58

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv