CSS - Animation

0 votes
213 views
added Jul 18, 2018 in CSS by LC Marshal Captain (25,790 points)
/*opacity/background upon hover*/
.glass-holder.stage{
    background: #000;
    opacity: .1;
    border: 1px solid white;
    height: 13.5rem;
    cursor: -webkit-zoom-in;
}
.glass-holder.stage:hover {
  opacity: .3;
  -webkit-transition: opacity .15s ease-out;
  -o-transition: opacity .15s ease-out;
  -moz-transition: opacity .15s ease-out;
  transition: opacity .15s ease-out;
}
 
 
/*default hover transition element */
a {
 transition: all .3s ease-in-out;
 transition: opacity 1s;
 transition: all 0.5s;
 transform: rotate(90deg);
 transform: rotate(0deg);
}
 
 
/*hover transition */
.project-items .item.project .thumbnail:hover {
  opacity: .8;
  transition: opacity .15s ease-out;
}
/*when .visible being called, this class will triggered; slide in from left*/
.mobile-menu.visible {
  transform: translate3d(250px, 0, 0);
  box-shadow: 2px 0px 5px 1px rgba(0, 0, 0, 0.2);
}
 
/*FadeIn transition*/
-webkit-transition: .25s ease-in-out; 
-moz-transition: .25s ease-in-out; 
-o-transition: .25s ease-in-out; 
transition: .25s ease-in-out;
 
/*Blur effect*/
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...