Are you first timer at Why not join us and start exchange your programming knowledge with everyone. Register today!

CSS - Animation

0 votes
added Jul 18, 2018 in CSS by LC Marshal Captain (26,090 points)
/*opacity/background upon hover*/
    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);


Please log in or register to response this reference. - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.