Site menu

CodeCook.io

  • Languages
    • C
    • C++
    • CSS
    • Git
    • HTML
    • Java
    • JavaScript
    • jQuery
    • PHP
    • Python
    • Ruby
    • Scala
  • animation
  • duration
  • easing
  • effect
  • transition
  • tween

CSS - Transition

The CSS transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It allows to define the transition between two states of an element. CSS Transition on MDN

1
439
  • Share on Facebook
  • Share on Google+
  • Share on Twitter

Custom timing transition

.custom-timing-transition {
  -webkit-transition: {{property}} {{duration}} {{timingFunction}};  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
          transition: {{property}} {{duration}} {{timingFunction}};  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}
css

Notes

last update: Nov. 26, 2014

0
439
  • Share on Facebook
  • Share on Google+
  • Share on Twitter

Simple transition

Implementation with vendor prefixes borrowed from CSS3 Please!

.simple-transition {
  -webkit-transition: {{property}} {{duration}};  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
          transition: {{property}} {{duration}};  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}
css

Notes

last update: Nov. 26, 2014

0
439
  • Share on Facebook
  • Share on Google+
  • Share on Twitter

Delayed transition

.delayed-transition {
  -webkit-transition: {{property}} {{duration}} {{timingFunction}} {{delay}};  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
          transition: {{property}} {{duration}} {{timingFunction}} {{delay}};  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}
css

Notes

last update: Nov. 26, 2014

Advertisement

This project is hosted on DigitalOcean, try it and support us

Random task

  • Stash changes and add stash name
  • Add user
  • Hello world
  • Show changes of about to commit files.
  • Upload local branch to remote
  • Blog
  • About
  • License