css3 article

bouncing.css

@keyframes bouncing{
  from { 
    bottom: 0; 
    box-shadow: 0 10px 10px rgba(0,0,0,0.6);
  }
  
  to { 
    bottom: 50px; 
    box-shadow: 0 100px 50px rgba(0,0,0,0.2);
  }
}

/* or */

@keyframes bouncing{
  0% { 
    bottom: 0; 
    box-shadow: 0 10px 10px rgba(0,0,0,0.6);
  }
  
  100% { 
    bottom: 50px; 
    box-shadow: 0 100px 50px rgba(0,0,0,0.2);
  }
}

box1.css

.box {
  transition-property: background width;
  transition-duration: 1s;
  transition-timing-function: linear;
}

box2.css

.box {
/*   transition-property: background, width;
  transition-duration: 1s;
  transition-timing-function: linear; */
}

box3.css

.box {
  transition-property: background, width;
  transition-duration: 1s, .4s;
  transition-timing-function: linear, ease-in;
}

box4.css

.box { 
  transition-property: background, width;
  transition-duration: 2s, .1s;
  transition-timing-function: linear, ease-in;
  transition-delay: 1s, 1s;
}

complete-bouncing.css

@keyframes bouncing {
 from { 
     width: 80px;
     height: 80px;
     transform: translateY(0); 
     box-shadow: 0 0px 30px rgba(0,0,0,0.6);
     background: radial-gradient(circle at 30px 30px, #00d2d3, #01a3a4, #000);
     
 }
  to { 
      width: 120px;
      height: 120px;
      transform: translateY(10px); 
      box-shadow: 0 60px 10px rgba(0,0,0,0.2);
      background: radial-gradient(circle at 30px 35px, #00d2d3, #01a3a4, #000);
      
  }
}

.circle {
    animation-name: bouncing;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    display: block;
    position: relative;
    border-radius: 100%;
    height: 92px;
    width: 92px;
    margin: 0 auto;
    transition: all linear .8s;
    background: radial-gradient(circle at 35px 35px, #00d2d3, #01a3a4, #000);
}

rotate1.css

.rotate1 {
  transition: all 1s linear;
}

.rotate1:hover { 
   transform: rotate(360deg);
}

rotatexy.css

.rotateY { 
   transform: rotateY(360deg);
}

.rotateX { 
   transform: rotateX(360deg);
}

scale.css

.scale { 
  transform: scale(2,2);
}

skew.css

.skew {
  transform: skew(10deg,10deg);
}

skewxy.css

.skew { 
  transform: skewX(20deg);
}

.skew { 
  transform: skewY(20deg);
}

tran3dmethod.md

translate

• translate3d(x,y,z), translateX(x), translateY(y), translateZ(z)

scale

• scale3d(x,y,z), scaleX(x), scaleY(y), scaleZ(z)

rotate

• rotate3d(x,y,z,angle), rotateX(angle), rotateY(angle), rotateZ(angle)

perspective

• perspective(n)

trans-box1.css

/* first time loading */
p {
  transform: translate(0px, 0px);
}

/* after loading has finished */
p {
  transform: translate(10px, 100px);
}

transz.css

#wrapper { 
  perspective: 1000px;
}

.box { 
   transform:rotateY(10deg) translateZ(150px);
}
/* or */

.box { 
   transform:rotateY(10deg) translate3d(0, 0, 150px);
}

transznosetting.css

#wrapper { 
  perspective: none;
}

.box { 
   transform:rotateY(10deg) translateZ(150px);
}
/* or */

.box { 
   transform:rotateY(10deg) translate3d(0, 0, 150px);
}