{ "@context": "https://schema.org", "@type": "Organization", "name": "Brainscape", "url": "https://www.brainscape.com/", "logo": "https://www.brainscape.com/pks/images/cms/public-views/shared/Brainscape-logo-c4e172b280b4616f7fda.svg", "sameAs": [ "https://www.facebook.com/Brainscape", "https://x.com/brainscape", "https://www.linkedin.com/company/brainscape", "https://www.instagram.com/brainscape/", "https://www.tiktok.com/@brainscapeu", "https://www.pinterest.com/brainscape/", "https://www.youtube.com/@BrainscapeNY" ], "contactPoint": { "@type": "ContactPoint", "telephone": "(929) 334-4005", "contactType": "customer service", "availableLanguage": ["English"] }, "founder": { "@type": "Person", "name": "Andrew Cohen" }, "description": "Brainscape’s spaced repetition system is proven to DOUBLE learning results! Find, make, and study flashcards online or in our mobile app. Serious learners only.", "address": { "@type": "PostalAddress", "streetAddress": "159 W 25th St, Ste 517", "addressLocality": "New York", "addressRegion": "NY", "postalCode": "10001", "addressCountry": "USA" } }

CSS: Animations Flashcards

(12 cards)

1
Q

What are CSS Animations?

A

CSS animations allow you to create dynamic, visually engaging effects on web pages without the need for JavaScript or complex programming. They provide a way to smoothly transition elements between different styles over a specified duration.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is the @keyframes Rule?

A

This rule defines the stages and styles of the animation. It specifies what styles the element should have at various points during the animation.

@keyframes slide-in {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is the “animation:” Property?

A

This is the shorthand property used to apply animations.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is the “animation-name:” Property?

A

This specifies the name for the @keyframes rule to use.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is the “animation-duration:” Property?

A

This sets how long the animation should take to complete.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is the “animation-timing-function:” Property?

A

This defines how the animation progresses over time (such as ease, linear, ease-in-out).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is the “animation-delay:” Property?

A

This specifies a delay before the animation starts.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is the “animation-iteration-count:” Property?

A

This sets how many times the animation should repeat.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What is the “animation-direction:” Property?

A

This determines whether the animation should play forwards, backwards, or alternate.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is the “animation-fill-mode:” Property?

A

This specifies how the element should be styled before and after the animation.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is the “animation-play-state:” Property?

A

This allows you to pause and resume the animation.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q
A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly