CSS Animations and Transitions Quiz

CSS Animations and Transitions

Animations

• Define animations using the @keyframes rule, which specifies the animation's style and duration
• Use the animation property to apply the animation to an element
• Properties:
  • animation-name: specifies the name of the animation
  • animation-duration: specifies the duration of the animation
  • animation-delay: specifies the delay before the animation starts
  • animation-iteration-count: specifies the number of times the animation should repeat
  • animation-direction: specifies the direction of the animation (normal, reverse, alternate)
• Example: @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

Transitions

• Define transitions using the transition property
• Properties:
  • transition-property: specifies the property to transition (e.g. width, height, background-color)
  • transition-duration: specifies the duration of the transition
  • transition-delay: specifies the delay before the transition starts
  • transition-timing-function: specifies the timing function of the transition (e.g. linear, ease-in-out)
• Example: transition: width 2s, height 2s;

HTML5 Semantic Elements

Introduction

• HTML5 introduced new semantic elements to improve the structure and meaning of web pages
• These elements provide better search engine optimization (SEO) and accessibility

Common Semantic Elements

• header: defines the header section of a document or section
• nav: defines a section of navigation links
• main: defines the main content section of a document
• section: defines a self-contained section of related content
• article: defines an independent piece of content, such as a blog post or news article
• aside: defines a piece of content that is related to the main content, but not essential
• footer: defines the footer section of a document or section
• figure and figcaption: define a figure and its caption

Other Semantic Elements

• mark: defines marked or highlighted text
• time: defines a specific date and time
• progress: defines a progress bar
• meter: defines a scalar value within a known range

Note: These elements can be used to improve the structure and accessibility of web pages, but they do not affect the layout or visual appearance of the page.

CSS Animations and Transitions

Animations

• Define animations using the @keyframes rule, specifying the animation's style and duration
• Apply animations to elements using the animation property
• Animation properties:
  • animation-name: specifies the animation's name
  • animation-duration: specifies the animation's duration
  • animation-delay: specifies the delay before the animation starts
  • animation-iteration-count: specifies the number of times the animation should repeat
  • animation-direction: specifies the animation's direction (normal, reverse, alternate)
• Example animation: @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

Transitions

• Define transitions using the transition property
• Transition properties:
  • transition-property: specifies the property to transition (e.g. width, height, background-color)
  • transition-duration: specifies the transition's duration
  • transition-delay: specifies the delay before the transition starts
  • transition-timing-function: specifies the timing function of the transition (e.g. linear, ease-in-out)
• Example transition: transition: width 2s, height 2s;

HTML5 Semantic Elements

Introduction

• HTML5 introduced new semantic elements to improve web page structure and meaning
• Semantic elements provide better search engine optimization (SEO) and accessibility

Common Semantic Elements

• header: defines the header section of a document or section
• nav: defines a section of navigation links
• main: defines the main content section of a document
• section: defines a self-contained section of related content
• article: defines an independent piece of content, such as a blog post or news article
• aside: defines a piece of content that is related to the main content, but not essential
• footer: defines the footer section of a document or section
• figure and figcaption: define a figure and its caption

Other Semantic Elements

• mark: defines marked or highlighted text
• time: defines a specific date and time
• progress: defines a progress bar
• meter: defines a scalar value within a known range

Test your knowledge of CSS animations and transitions, including the @keyframes rule, animation properties, and more. See how well you can animate your web page!