Lesson 32-CSS3 Transformations, Transitions and Animations

Transformations, Transitions and Animations

transform

The transform property allows you to transform an element in 2D or 3D space, including translation, rotation, scale, skew and matrix transformation

element {
    transform: none | <transform-function> [, <transform-function>]*;
}

element {
    transform: none | <transform-function> [, <transform-function>]*;
}

• none: no transformation.
• <transform-function>: one or more transformation functions, common ones include:
• translate(X, Y) or translateX(X), translateY(Y): translate the element along the X and/or Y axis.
• rotate(angle): rotate the element around the center of the element (unless changed using transform-origin).
• scale(X, Y) or scaleX(X), scaleY(Y): enlarge or reduce the element by a specified ratio.
• skew(X-angle, Y-angle) or skewX(X-angle), skewY(Y-angle): skew the element along the X-axis and/or Y-axis.
• matrix(a, b, c, d, tx, ty): use matrix transformation, which contains six parameters and can combine all the above transformations.

.transformed-element {
    /*The element is translated to the lower right corner (50px, 80px), rotated 30 degrees clockwise, and enlarged by 1.5 times. */
    transform: translate(50px, 80px) rotate(30deg) scale(1.5);
}

.transformed-element {
    /*The element is translated to the lower right corner (50px, 80px), rotated 30 degrees clockwise, and enlarged by 1.5 times. */
    transform: translate(50px, 80px) rotate(30deg) scale(1.5);
}

transform-origin

The transform-origin property specifies the reference point (origin) when the element is transformed

element {
    transform-origin: [ <percentage> | <length> | left | center | right | top | bottom ] |
[ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]?
}

element {
    transform-origin: [ <percentage> | <length> | left | center | right | top | bottom ] |
[ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]?
}

• You can use length values, percentages, or keywords (such as left, center, right, top, bottom) to specify the origin. The first value represents the X-axis coordinate, and the second value (optional) represents the Y-axis coordinate. If only one value is provided, the second value defaults to center.

.rotated-element {
    transform: rotate(45deg);
    transform-origin: top right; /* Rotate from the top right corner */
}

.rotated-element {
    transform: rotate(45deg);
    transform-origin: top right; /* Rotate from the top right corner */
}

Perspective

• The perspective property defines the distance from the viewer to the 3D element, which affects the depth and perspective of the element in the 3D transformation.
• When an element sets perspective, its child elements will show perspective. The element itself will not change, it just acts as a container for 3D space.
• The larger the value, the less obvious the 3D effect (because the viewer is farther away from the element, the sense of depth is reduced); the smaller the value, the stronger the 3D effect (the viewer is close to the element, the sense of depth is enhanced).
• For example: perspective: 500px; will set a perspective distance of 500 pixels.

Transform-style

• The transform-style property controls how the child elements are positioned in 3D space.
• By default, transform-style: flat;, child elements are flattened and lose their sense of position in 3D space.
• When set to transform-style: preserve-3d;, child elements retain their 3D position, allowing the creation of complex 3D structures.
• This is very important for creating 3D transformations and animations, such as rotation, flipping, and other effects.

transition

The transition attribute is a shorthand attribute used to define the transition effect when an element switches between different states

element {
    transition: [ none | <single-transition> ] [, <single-transition>]*;
}

element {
    transition: [ none | <single-transition> ] [, <single-transition>]*;
}

transition-delay

Specifies the delay time before the transition animation starts, such as 0.3s, 0s, etc.

transition-duration

Specifies the duration of the transition animation, such as 1s, 0.5s, etc.

transition-property

Specify the CSS property that triggers the transition, such as all (all transitionable properties), width, background-color, etc.

transition-timing-function

Specify the transition speed curve, such as ease (default, smooth acceleration and deceleration), linear (constant speed), ease-in (slow start), ease-out (slow end), etc. You can also use the cubic-bezier function to customize the curve.

animation

animation is a powerful property in CSS for creating keyframe animations. Keyframe animations allow you to define a series of style changes that will be played back in a loop at a specified speed curve and number of times over a specific period of time.

.animated-element {
    animation: spin 2s ease-in-out 1s 2 alternate both;
}

.animated-element {
    animation: spin 2s ease-in-out 1s 2 alternate both;
}

.animated-element defines a keyframe animation called spin, with a duration of 2 seconds, using an ease-in-out speed curve, a 1-second delay, playing twice, alternating directions, and applying the first keyframe style before the animation starts, and retaining the last keyframe style after the animation ends.

animation-name

The animation-name property specifies the name of the keyframe animation to be applied. Keyframe animations are usually defined in the @keyframes rule

@keyframes animation-name {
    from { ... } /* Initial state style */
    to { ... } /* End state style */
    /* Or use percentages to indicate keyframe positions */
    0% { ... }
    50% { ... }
    100% { ... }
}

@keyframes animation-name {
    from { ... } /* Initial state style */
    to { ... } /* End state style */
    /* Or use percentages to indicate keyframe positions */
    0% { ... }
    50% { ... }
    100% { ... }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinning-element {
    animation-name: spin;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinning-element {
    animation-name: spin;
}

animation-duration

The animation-duration property specifies how long it takes for an animation to complete a cycle. Its value can be in seconds (s) or milliseconds (ms)

.animated-element {
    animation-duration: 2s; /* animation lasts 2 seconds */
}

.animated-element {
    animation-duration: 2s; /* animation lasts 2 seconds */
}

animation-timing-function

The animation-timing-function property defines the speed curve of the animation. Its value can be a predefined keyword (such as ease, linear, ease-in, ease-out, ease-in-out) or a cubic-bezier function to customize the curve.

.animated-element {
    animation-timing-function: ease-in-out; /* animation uses the ease-in-out speed curve */
}

.animated-element {
    animation-timing-function: ease-in-out; /* animation uses the ease-in-out speed curve */
}

animation-delay

The animation-delay property specifies the waiting time before the animation starts. Its value can be in seconds (s) or milliseconds (ms).

.delayed-animation {
    animation-delay: 1s; /* animation starts after 1 second delay */
}

.delayed-animation {
    animation-delay: 1s; /* animation starts after 1 second delay */
}

animation-iteration-count

The animation-iteration-count property specifies the number of times the animation should be played. Its value can be an integer (such as 2 means play twice), infinite (infinite loop), or initial (default, play once).

.looping-animation {
    animation-iteration-count: infinite; /* animation loops infinitely */
}

.looping-animation {
    animation-iteration-count: infinite; /* animation loops infinitely */
}

animation-direction

The animation-direction property specifies whether the animation should play in reverse order on each loop. Its value can be normal (default, each loop plays in normal order), reverse (each loop plays in reverse order), alternate (odd loops play forward, even loops play in reverse order), or alternate-reverse (odd loops play reversely, even loops play forward).

.alternating-animation {
    animation-direction: alternate; /* The animation alternates between forward and reverse in each loop */
}

.alternating-animation {
    animation-direction: alternate; /* The animation alternates between forward and reverse in each loop */
}

animation-fill-mode

The animation-fill-mode property defines how the element’s style should behave before and after the animation is executed. Its value can be none (the default value, which restores the state before the animation starts after the animation ends), forwards (the style of the last keyframe is retained after the animation ends), backwards (the style of the first keyframe before the animation starts) or both (the style of the first keyframe before the animation starts is applied, and the style of the last keyframe is retained after the animation ends).

.persistent-animation {
    animation-fill-mode: both; /* The style of the first keyframe is applied before the animation starts, and the style of the last keyframe is retained after the animation ends */
}

.persistent-animation {
    animation-fill-mode: both; /* The style of the first keyframe is applied before the animation starts, and the style of the last keyframe is retained after the animation ends */
}

animation-play-state

The animation-play-state property controls whether the animation is running. Its value can be running (animation is playing) or paused (animation is paused).

.paused-animation {
    animation-play-state: paused; /* animation paused */
}

.paused-animation {
    animation-play-state: paused; /* animation paused */
}