When your website means business.

Animation, CSS3 | Type: CSSCSS Animations and Transitions

CSS syntax and examples.

Animation

SYNTAX
.example { 
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay]; 
}

EXAMPLE
.box {
animation:  bounceIn 2s ease-in-out 3s;
}

Transitions

SYNTAX
.example { 
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; 
}

EXAMPLE
.box {
  width: 150px;
  height: 150px;
  background: red;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

.box:hover {
  background-color: green;
  cursor: pointer;
}

Reference Links

We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
Accept