Skip to main content

CSS-Animations

Animation: CSS-Animations

Why do we use CSS animation in web development?​

View Answer:
Interview Response: CSS animations make it possible to do simple animations without JavaScript. JavaScript can be used to control CSS animations and make them even better with little code. The general idea is that when you can use CSS versus JavaScript, you should because it reduces the load on the browser.

Can you briefly define the idea around CSS transitions?​

View Answer:
Interview Response: CSS transitions are a basic concept. We explain a property's modifications and how they should be animated. The browser paints the animation whenever the property changes, and we have to alter the property, and the browser transitions smoothly.

Code Example:

<button id="color">Click me</button>

<style>
  #color {
    transition-property: background-color;
    transition-duration: 3s;
  }
</style>

<script>
  color.onclick = function () {
    this.style.backgroundColor = 'red';
  };
</script>

What are the four properties used to describe CSS transitions?​

View Answer:
Interview Response: There are 4 properties to describe CSS transitions, including transition-property, transition-duration, transition-timing-function, and transition-delay.

Is it possible to utilize the transition property to animate many CSS properties at the same time?​

View Answer:
Interview Response: Yes, we can transition multiple CSS properties, like font size and color.

Code Example:

<button id="growing">Click me</button>

<style>
  #growing {
    transition: font-size 3s, color 2s;
  }
</style>

<script>
  growing.onclick = function () {
    this.style.fontSize = '36px';
    this.style.color = 'red';
  };
</script>

Could you perhaps explain how to utilize the CSS transition property?​

View Answer:
Interview Response: The transition-property CSS property sets the CSS properties to which a transition effect should be applied. In transition-property, we write a list of properties to animate, for instance, left, margin-left, height, color, or we could write all, which means “animate all properties”. We should note that some properties cannot be animated. However, most of the generally used properties are MDN animatable.

Code Example:

div {
  width: 100px; // <-
  height: 100px;
  background: red;
  transition-property: width; // <-
  transition-duration: 2s;
}

div:hover {
  width: 300px; // <-
}

What does the CSS transition-duration property set?​

View Answer:
Interview Response: The transition-duration CSS property sets the length of time a transition animation should take to complete. By default, the value is 0s, meaning no animation occurs.

You may specify multiple durations; each duration gets applied to the related property specified by the transition-property property, which acts as a master list. If fewer durations get specified than in the master list, the user agent repeats the list of durations. If there are more durations in the list, the list truncates to the correct size. In both cases, the CSS declaration stays valid.

Code Example:

div {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: width;
  transition-duration: 2s; // <-
}

div:hover {
  width: 300px;
}

What does the CSS transition-delay property do?​

View Answer:
Interview Response: The transition-delay CSS property specifies the duration to wait before starting a property's transition effect when its value changes.

Code Example:

div {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: width;
  transition-duration: 5s;
  transition-delay: 2s; // <-
}

div:hover {
  width: 300px;
}

What does the CSS transition-timing-function CSS property do?​

View Answer:
Interview Response: The transition-timing-function CSS property specifies how a transition effect impacts the computed intermediate values for CSS properties. The timing function specifies how the animation process progresses throughout its timeline. Will it begin slowly and then pick up speed, or vice versa? At first glance, it looks to be the most challenging property. However, it becomes relatively simple if we dedicate some effort to it. The transition-timing-function attribute takes one of two values: a Bezier curve or steps.

Code Example:

div {
  width: 100px;
  height: 50px;
  background: red;
  color: white;
  font-weight: bold;
  transition: width 2s;
}

#div1 {
  transition-timing-function: linear;
}
#div2 {
  transition-timing-function: ease;
}
#div3 {
  transition-timing-function: ease-in;
}
#div4 {
  transition-timing-function: ease-out;
}
#div5 {
  transition-timing-function: ease-in-out;
}

div:hover {
  width: 300px;
}

What does the cubic-bezier() CSS function do?​

View Answer:
Interview Response: The cubic-bezier() function defines a Cubic Bezier curve. A Cubic Bezier curve gets defined by P0, P1, P2, and P3 points. P0 and P3 are the curve's start and end, and, in CSS, these points are fixed as the coordinates are ratios. P0 is (0, 0) and represents the initial time and the initial state, and P3 is (1, 1) and represents the final time and the final state. We use the cubic-bezier() function with the animation-timing-function and transition-timing-function properties.

Code Example:

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
}

div:hover {
  width: 300px;
}

What makes the built-in curves different from the cubic-bezier() function?​

View Answer:
Interview Response: The main difference between the CSS built-in curves and the cubic-bezier() function is that the function can make the animation exceed its range. The control points on the curve can have any y coordinates: even negative or huge ones. Then the Bezier curve would also extend exceptionally low or high, making the animation go beyond its normal range.

Code Example:

.myImage {
  position: relative;
  cursor: pointer;
  width: 177px;
  height: 160px;
  left: 100px;
  transition: left 5s cubic-bezier(0.5, -1, 0.5, 2); // <-
}

Can you explain the function and syntax of the timing function CSS steps() function?​

View Answer:
Interview Response: The steps() function allows you to specify intervals for the timing function. It takes one or two parameters, separated by a comma: a positive integer and an optional start or end value. If we do not include a second parameter, it defaults to end.

Code Example:

#stripe.animate {
  transform: translate(-90%);
  transition-property: transform;
  transition-duration: 9s;
  transition-timing-function: steps(9, start); /* <-- */
}

Explain the function and syntax of the CSS transitionend event?​

View Answer:
Interview Response: The transitionend event fires when a CSS transition reaches completion. If a transition gets removed before completion, the transition-property deletes, or the display attribute changes to none, the event is not triggered.

Code Example:

const transition = document.querySelector('.transition');

transition.addEventListener('transitionend', () => {
  console.log('Transition ended');
});

Can you describe what CSS keyframes are and how we utilize them in web development?​

View Answer:
Interview Response: The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This process gives more control over the intermediate steps of the animation sequence than transitions.

Code Example:

<div class="progress"></div>

<style>
  @keyframes go-left-right {
    /* give it a name: "go-left-right" */
    from {
      left: 0px;
    } /* animate from left: 0px */
    to {
      left: calc(100% - 50px);
    } /* animate to left: 100%-50px */
  }

  .progress {
    animation: go-left-right 3s infinite alternate;
    /* apply the animation "go-left-right" to the element
       duration 3 seconds
       number of times: infinite
       alternate direction every time
    */

    position: relative;
    border: 2px solid green;
    width: 50px;
    height: 20px;
    background: lime;
  }
</style>