After this unit, you'll be able to:
Adding animation to your website is a powerful way to drive users' attention to certain areas of your product and add interest to your interface. After all, our brains are naturally built to track moving objects.
When done well, animations can add valuable interaction and feedback, as well as enhance the emotional experience, bring delight, and add personality to your interface. In fact, to animate means to bring to life.
voir la specification https://www.w3.org/TR/css-transitions/
CSS transitions are nothing other than mutations of DOM elements by the use of CSS. Usually, property changes take effect immediately. Take a look at the example in this CodePen:
In the code above, you'll find two sets of rules for the same element.
.box
and it describes the regular box style..box:hover
and it describes the box style when the mouse hovers on the element.When the user's mouse hovers over the element, the change is instantaneous. CSS transitions let us adjust this response's speed to happen over a period of time.
Now, add this code to the .box
class and try again:
Let's explain the code above.
The CSS3 Transitions module introduces a number of properties, which together can be used to specify:
transition-property
: Specifies the CSS property (or properties) to be transitioned.transition-duration
: Specifies the duration of the transition.transition-timing-function
: Specifies the timing function of the transition.transition-delay
: Specifies an optional delay.transition-property
CSS transitions let you decide which properties to animate (by listing them explicitly). The first step to create a transition effect is to specify which CSS property (or properties) will be affected:
The transition-property
can be configured in two different ways:
all
(the default value) or none
:Add this line to your CodePen exercise to transform the element's width:
none
, it will not create any kind of animation. This is used to avoid inheritance of transition in nested elements.
transition-duration
The transition-duration
property accepts a comma-separated list of times, specified in seconds or milliseconds, which determine how long the corresponding properties (specified using transition-property) take to complete their transition.
The code in our transition rule will be triggered by the mouse hovering over the element. When this happens, it will transform the element (making it bigger) until it reaches the 200px
established in the hover state.
Steps between initial state and final state of a transition are often called implicit transitions. These are implicitly defined and automatically calculated by the browser.
Add this line to your CodePen exercise:
transition-duration
property’s default value is 0, meaning that the transition is instantaneous. The only value required to create a transition is that of transition-duration.
What happens if the transition-duration
property is not specified in the transition effect?
transition-timing-function
The transition-timing-function
property is used to specify how the pace of the transition changes over its duration.
The easy way to implement it is by specifying a number of pre-defined keywords: ease, linear, ease-in, ease-out or ease-in-out
with
If no timing function is specified, the default value is ease. Let's make our transition linear by adding:
Add this line to your CodePen exercise to transform the element's width:
transition-delay
retardateur
The final step when creating a transition effect is to specify an optional delay using the transition-delay
property. It accepts a comma-separated list of times, specified in seconds or milliseconds, which in this case determines the length of time between the transition being triggered and the transition starting. The default value is 0.
transition-delay: <time> [, <time>]*
Add this line to your code, change the number of seconds to see the differences. What happens if you set a negative value?
ie, the transition effect will begin part-way through its cycle (see the examples section below for an example).
All-in-one :
voir la spec https://www.w3.org/TR/css-transitions/#transition-shorthand-property
Instead of writing four lines of code to create a transition, we can simplify our code by use the transition shorthand property. The syntax is:
Change the code above to match this syntax:
It is possible to transform multiple properties at the same time. The transition shorthand property can be used to define multiple transitions, using a comma-separated list. Take a look a this code:
Copy the code above to the previous example to watch the changes.
Our code in the box:hover
class will be something like this:
Meanwhile, our transition ends up like this:
voir spécification : https://www.w3.org/TR/css-animations-1/
CSS animations are a combination of two basic components: a style, describing the CSS animation, and a set of @keyframes indicating the states of the animation and possible intermediate steps.
Let's animate this Ironhack hexagon in CodePen
As they define what the animation looks like at each stage of the animation timeline, they constitute the essential foundation of the animations.
To make our hexagon slide in, we are going to change its position using keyframes:
Each @keyframes is composed of:
0%
represents the beginning state of the animation. 100%
represents the ending state of the animation. Multiple intermediate states can be added in between. Use percentages to define the different stages of the animation.The @keyframes
are added to your main CSS file.
Animation properties do two things: assign the @keyframes to the element that you want to animate and define how it is animated. To create an animation you must add two properties:
animation-name
It is the name of the animation defined in the @keyframes.
animation-duration
The duration of the animation in seconds or milliseconds.
Continuing with the above CodePen, add animation-name and animation-duration to the container class.
Although the name and duration are enough properties to define an animation, there are other sub properties we can define:
animation-delay
: Allows you to specify in seconds or milliseconds when the animation will start. A positive value will start the animation after it is triggered. A negative value will start the animation at once, but starts as many seconds as specified into the animation.
animation-direction
: Configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself. Values are: normal
(default), reverse
, alternate
or `alternate-reverse
animation-iteration-count
: Defines the number of times the animation should repeat. Its value could be:
infinite
to repeat it forever.initial
to set the iteration count to the default value.inherit
to inherit the value from the parent.animation-play-state
: Lets you pause and resume the animation sequence.
animation-timing-function
: Defines the speed curve or pace of the animation, Predefined timing options are: ease
, linear
, ease-in
, ease-out
, ease-in-out
, initial
, inherit
. You could even create your custom timing functions using cubic-bezier
class. The default value is ease, which starts out slow, speeds up, then slows down. play around
animation-fill-mode
: This property is a little confusing, but once understood it is very useful. It specifies if the animation styles stay visible before or after the animation plays. Its values could be:
backwards
: before the animation (during the animation delay), the styles of the initial keyframe (0%) are applied to the element.forwards
: After the animation is finished, the styles defined in the final keyframe (100%) are retained by the element.both
: The animation will follow the rules for both forwards and backwards, extending the animation properties before and after the animation.normal
(default): The animation does not apply any styles to the element, before or after the animation.Each animation property can be defined individually, but for cleaner and faster code, it’s recommended that you use the animation shorthand. All the animation properties can be added to an animation in one step by defining properties in the following order:
The next step is to define the slidein
animation using keyframes.
To add multiple animations to a selector, you simply separate the values with a comma. Here’s an example:
Transitions | Animations | |
---|---|---|
Starting Them | Require a trigger to run. The trigger may be one of the events listed in the last section or it might be JavaScript, but the transition needs something outside itself to start. | Do not need a trigger. They can respond to a trigger, but one isn’t needed to start the animation. Animations can run automatically when the page first loads. |
Defining Intermediate Points | Limited to an initial and final state | Animations can include as many intermediate states (keyframes) as desired in between the initial and final state. |
CSS Iteration | Can’t change CSS properties. | Can change property values inside their keyframes. |
Looping | They are not designed for looping | Have no problem for looping. |
In the next CodePen, you will find three geometric figures (all of them created using only CSS). Your mission is to create a different animation for each one of them:
There are three key advantages to CSS animations over traditional script-driven animation techniques:
Now, you are able to create amazing transitions and animations. Your websites will be more interactive and appealing to users by letting them interact and trigger transitions with your site. Also, your websites will have automatic motion by using complex animations properties and keyframes. With those basic properties, the possible animations you can create are endless!