Animations on CSS

What is a keyframe in CSS animations?

• A keyframe in CSS animations is a type of font style

• A keyframe in CSS animations is a specific color code

• A keyframe in CSS animations is a type of HTML element

• A keyframe in CSS animations is a frame that specifies the styles at a certain point in the animation sequence.

How can you create transition effects in CSS animations?

• Include JavaScript code within the CSS file for animations

• Apply random CSS classes to elements for transition effects

• Use the 'transition' property along with specific transition properties to define the desired animation effects.

• Use the 'animate' property with predefined animations

Name some common animation properties used in CSS.

• transition-duration

• keyframe-timing

• animation-effect

• animation-speed

• animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode

Explain how to animate text using CSS.

• Use keyframes to define animation behavior and apply it to text element using animation property.

• Use JavaScript instead of CSS for text animation

• Apply animation directly to the text without keyframes

• Use flexbox to animate text

What are the steps to create animated buttons with CSS?

• Define animation using HTML tags

• Apply animation to the body element instead of the button element

• Use JavaScript instead of CSS for animation

• Use CSS keyframes to define animation, apply animation to button element, specify animation properties

How can CSS animations be used for hover effects?

• Apply CSS transitions to achieve hover effects

• Use JavaScript to trigger CSS animations on hover

• Use inline styles to create hover animations

• Define animation properties and keyframes, then apply them to an element using :hover pseudo-class.

What is the syntax for defining keyframes in CSS animations?

• keyframes animationName { 0% { /* CSS properties */ } 50% { /* CSS properties */ } 100% { /* CSS properties */ }}

• @keyframes { 0% { /* CSS properties */ } 100% { /* CSS properties */ }}

• @keyframes animationName { 0% { /* CSS properties */ } 50% { /* CSS properties */ } 75% { /* CSS properties */ } 100% { /* CSS properties */ }}

• @keyframes animationName { 0% { /* CSS properties */ } 100% { /* CSS properties */ }}

What is the purpose of the 'animation-duration' property in CSS?

• To change the font size of the text

• To add a border around the element

• To set the background color of the element

• To specify the duration of the animation in CSS.

How can you control the speed of an animation in CSS?

• Change the background color

• Add a border

• Adjust the font size

• Use the 'animation-duration' property in CSS.

What is the difference between 'transition' and 'animation' in CSS?

• Transitions and animations are the same thing in CSS.

• Transitions are only used for text effects, while animations are for images.

• Transitions are faster than animations in CSS.

• Transitions change property values smoothly over a specified duration, while animations allow for more complex keyframe-based animations.