Transitions & Animations Basics.

To create a transition effect, you must specify two things:

• the CSS property you want to add an effect to

• the duration of the effect (If the duration part is not specified, the transition will have no effect, because the default value is 0).

    transition: width 2s, height 2s, color: 4s, font-size 4s;

You can also include the transition-timing-function and the transition-delay property.

    transition: width 2s ease 0.5s, height 2s linear 0.25s;

The transition-timing-function specifies the speed curve of the transition effect.

The transition-timing-function property can have the following values:

• ease - a transition effect with a slow start, then fast, then end slowly (this is default)

• linear - a transition effect with the same speed from start to end

• ease-in - a transition effect with a slow start

• ease-out - a transition effect with a slow end

• ease-in-out - a transition effect with a slow start and end

• cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

Transform:

As transition operates by modifying CSS properties of an element over given period of time; transform is also a CSS property. Transformation modifies the state of that element directly. It has primarily 4 functions: translate, scale, rotate, skew. The following example adds a transition effect to the transformation (as transform is a property):

  transition: width 2s, height 2s, transform 5s;

The transform-origin property allows you to change the position of transformed elements. 2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element.

The transform-style property specifies how nested elements are rendered in 3D space. transform-style: preserve-3d lets the transformed child elements preserve the 3D transformations. Means, the children can’t be transformed anymore. As the parent has been transformed and with it the children have transformed as well. That state is preserved. No more transformation is acceptable. So, even if transformation is applied on child elements, they will not take effect and only the transform applied on the parent will be effective, the transform of the children at that stage will be preserved. The default value is, transform-style: flat that allows transformation in children.

The primary difference between 2D environment and 3D environment is Z-axis. So, to create a 3D environment in our 2D plane(computer screen), we need to declare perspective. Every time you need to work in a 3D environment, you need to define perspective first. perspective defines how far the object is away from the user (Not literally. Mathematically. To declare the distance of the object from the user and browser controls how it would appear when moved on a 3D plane. Example given below.). So, a lower value will result in a more intensive 3D effect than a higher value. When defining the perspective property for an element, it is the CHILD elements that get the perspective view, not the element itself. Like we add perspective to body and the effect is seen on the children.

body{
    perspective: 1000px;
}

img:hover{
    transform: translateZ(300px);
}

Assuming, your laptop screen is your full view, the image is initially 1000px away on 3D plane, on hover, the image is enlarged at the ratio an actual object would be enlarged. Notice, the image height, width has not changed. Means, it’s different from scale(). It doesn’t change the image rather brings the image forward on 3D space. So, if you set perspective to 500px. And now you hover, You’ll see the image is too much enlarged. Because, now, the browser is thinking the object is 500px away from you and on hover, it brings the object 300px close to you, meaning only 200px away from you. Where last time it was 1000px-300px = 700px away. That’s why the image seems more enlarged now. Then if you set transform: translateZ(1500px); what’ll happen is the image will go through you, as the image has passed through the initial distance from you and beyond. As a result, you’ll not be able to see the image. If you add some transition-duration you’ll get a feel like the image has gone through you. 3D versions of transformation functions will operate with and without perspective. But when it comes to 3D animation, perspective is must. It lets the browser the decide how to move that element on the 3D plane.

The perspective-origin property defines at from which position the user is looking at the 3D-positioned element. When defining the perspective-origin property for an element, it is the CHILD elements that will get the effect, NOT the element itself. perspective-origin: x-axis y-axis; Possible values: top, bottom, left, right, center, % (default value: 50%).

• There are some CSS properties that not animated because the change in these properties doesn't happen gradually. It just changes from one state to another without any intermediate values. Such as background-image, display, visibility, content, border-style, position, float, background-repeat, font-family, font-size, grid-template-columns, grid-template-rows, flex-grow, flex-shrink, flex-basis. Because these properties does not change gradually rather changes all of a sudden or immediately. So, the animateable properties are those that can be expressed by numbers because the browser can calculate intermediate values such as with height, border-size, color, width, height, padding, margin, line height, opacity and many more.

---

Animations

CSS allows animation of HTML elements without using JavaScript. An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times as you want.

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: example;
  animation-duration: 4s;
  animation-timing-function: ease-out;
  animation-delay: 0s; /* you can even pass negative value e.g:-2s, will make the animation initial 
  appearance with the UI after 2 seconds as if the animation has been running for s seconds */
  animation-iteration-count: 2;
  animation-direction : none;
  animation-fill-mode: none;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

Here, animation gets priority. Instead of background color blue, it the element appears red at first. The animation runs twice with 4s each. Then, the default blue color appears.

The animation-timing-function supports the same properties as transition-timing-function. It even works with keyframes percentage amounts. As percentages only contain property values but how to go through the animation completion/progress percentage calculation (linear: 0%, 20%, 40%, 60%, 80%, 100%) or (ease-in: 0%, 10%, 25%, 40%, 65%, 100%) is defined by the animation.

The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The animation-direction property can have the following values:

• normal - The animation is played as normal (forwards). This is default

• reverse - The animation is played in reverse direction (backwards)

• alternate - The animation is played forwards first, then backwards

• alternate-reverse - The animation is played backwards first, then forwards

So, if we add animation-direction : alternate; the last keyframe will be red.

The animation-fill-mode property specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both). CSS animations do not affect an element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior.

The animation-fill-mode property can have the following values:

• none - Default value. Animation will not apply any styles to the element before or after it is executing

• forwards - The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)

• backwards - The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period

• both - The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions

So, in the code above, if we put animation-fill-mode: forwards; the default color will never be shown and the final frame color yellow will persist after end of the animation.

Shorthand:

   animation: example 4s linear 1s infinite alternate forwards;