CSS Animations

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Syntax

  • transition: <property> <duration> <timing-function> <delay>;
  • @keyframes <identifier>
  • [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*

Parameters

Transition 
ParameterDetails
propertyEither the CSS property to transition on, or all, which specifies all transition-able properties.
durationTransition time, either in seconds or milliseconds.
timing-functionSpecifies a function to define how intermediate values for properties are computed. Common values are ease, linear, and step-end. Check out the easing function cheat-sheet for more.
delayAmount of time, in seconds or milliseconds, to wait before playing the animation.
  
@keyframes 
[ from | to | <percentage> ]You can either specify a set time with a percentage value, or two percentage values, ie 10%, 20%, for a period of time where the keyframe's set attributes are set.
blockAny amount of CSS attributes for the keyframe.


Got any CSS Question?