CSS3 Effects Demos

This repo contains a set if examples using CSS3 properties to get some effects and animations

01. Simple Color Fade

Demo | Code

transition: color 3s linear;

02. Simple Slide

Demo | Code

transition: left 2s linear;

03. Simple Slide Practical

Demo | Code

transition: left .3s linear;

04. Gradients

Demo | Code

background: linear-gradient(to right, #000, #FFF);

05. Reflections

Demo | Code

-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, white 0%, transparent 50%, transparent 100%);

06. Sliding Doors

Demo | Code

transition: left .6s linear;

07. Masks

Demo | Code

-webkit-mask-box-image: url(../img/letter-a.png);

08. Useless Rotate

Demo | Code

img {
  transition: transform 1s linear;
  &:hover {
    transform: rotate(180deg);
  }
}

09. Simple Rotate Scale

Demo | Code

@keyframes pulse {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg) scale(2);
  }
}
.pulse {
  animation: pulse 4s alternate 2;
  ...
}

10. Advanced Rotate Scale

Demo | Code

@keyframes pulse {
  0% {}
  50% { transform: rotate(-180deg) scale(5) }
  100% { transform: rotate(-360deg) scale(.2) }
}

.pulse {
  animation: pulse 4s alternate 2;
  ...
}