Loading video…
All breakouts
8.3Talking HeadHow-To hookEducation
Hook
CSS Transitions
@codevibes_1
52.7K followers · usually 2.2K views a post
Views
18.4K
Likes
1.4K
Comments
16
Shares
127
Why it worked
The video effectively explains a complex CSS concept using clear visual examples and code snippets, making it easy for viewers to understand and apply the technique.
Summary
The video demonstrates how to use the CSS @starting-style rule to create smooth transitions for elements that appear dynamically on a page, such as modals. It explains that this rule defines the initial state of an element before its first transition, allowing for animations like fading and scaling to occur seamlessly.
Structure
- 1Introduction to CSS transitions and their limitations
- 2Demonstration of a modal appearing instantly
- 3Explanation of the @starting-style rule
- 4Applying @starting-style to the modal for initial state
- 5Applying @starting-style to the modal's backdrop
- 6Demonstration of transitions in React with conditional rendering
On-screen text
CSS
CSS Transitions
Always had one big problem
OLD
.element {
opacity: 0;
}
NEW
.element {
opacity: 1;
}
TRANSITION
OLD
.element {
opacity: 0;
}
TRANSITION
NEW
.element {
opacity: 1;
}
Show Modal
My Modal
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae ipsum assumenda inventore dolor illo voluptas commodi, maiores officiis nam voluptate?
Close
Show Modal
Close
index.html
@starting-style CSS at-rule
Baseline 2024 NEWLY AVAILABLE
Show Modal
The @starting-style CSS at-rule is used to define starting values for properties set on an element that you want to transition from when the element receives its first style update, i.e., when an element is first displayed on a previously loaded page.
index.html
App.css
.comment {
margin-top: 0.5rem;
background-color: var(--surface-color);
color: var(--text-color);
padding: 0.75rem 1em;
border-radius: var(--radius);
}
.comment {
margin-top: 0.5rem;
background-color: var(--surface-color);
color: var(--text-color);
padding: 0.75rem 1em;
border-radius: var(--radius);
}
opacity: 1;
translate: 0;
transition: opacity 400ms ease,
translate 400ms ease;
dialog[open] {
opacity: 1;
scale: 1;
}
@starting-style {
opacity: 0;
scale: 0.8;
}
dialog {
transition-duration: 0ms;
}
@media (prefers-reduced-motion: reduce) {
dialog {
transition-duration: 0ms;
}
}
export default function App() {
const [visible, setVisible] = useState(false);
return (
<button onClick={() => setVisible(true)}>Show</button>
{visible && <div>New element</div>}
);
}
App.css
.comment {
margin-top: 0.5rem;
background-color: var(--surface-color);
color: var(--text-color);
padding: 0.75rem 1em;
border-radius: var(--radius);
}
opacity: 1;
translate: 0;
transition: opacity 200ms ease,
translate 200ms ease;
@starting-style {
opacity: 0;
translate: 5rem 0;
}
@media (prefers-reduced-motion: reduce) {
dialog {
transition-duration: 0ms;
}
}
index.html
Home Page
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum
Dolor sit
Lorem ipsum dolor
Lorem ipsum
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Integer eget magna in urna porta aliquet. Duis at nunc ac arcu varius fermentum. Mauris non sed ipsum assumenda inventore dolor illo voluptas commodi, maiores officiis nam voluptate?
tempore reprehenderit quos obcaecati
Lorem ipsum dolor sit amet
Dolor sit
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Integer eget magna
Lorem ipsum dolor sit amet
About Page
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Integer eget magna in urna porta aliquet. Duis at nunc ac arcu varius fermentum. Mauris non sed ipsum assumenda inventore dolor illo voluptas commodi, maiores officiis nam voluptate?
Lorem Ipsum
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur quo ducimus earum sed fugiat, labore voluptatibus magnan voluptae? Iste dolore quia at maiores vel eius rerum. Ut ipsa quisquam rem. Quo, non fugiat, nobis saepe consequuntur assumenda placeat pariatur, maiores corporis labore provident dicta quam optio. Expedita, rem quibusdam porro, aperiam tempora sed quam vero alias quis tempore maiores fugo rerum laudantium enim delectus, libero ducimus placeat atque dolore molestiae omnis cumque sunt optio id? Reiciendis, sapiente. Eius, eligendi voluptate.
Contact Page
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem
Lorem ipsum
Ipsum
dolor@email.com
Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Integer
ac sem sed justo.
Lorem ipsum dolor sit amet
Dolor sit
Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Cras
sit amet mi at justo maximus tincidunt.
Lorem ipsum dolor sit
CSS
can now animate
between two separate
html pages
Home
About
Contact
Home Page
Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
This is a link to an article.
Lorem ipsum dolor sit amet,
consectetur adipisicing elit.
Home
About
Contact
This is the Article Page
Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Integer
ac sem sed justo.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Integer
ac sem sed justo.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Integer
ac sem sed justo.
Lorem ipsum dolor sit amet
Watch this video
before you start
using this everywhere
@media (prefers-reduced-motion: reduce) {
dialog {
transition-duration: 0ms;
}
}
let me show you
something even crazier
Original caption
Css New Features Are Mind Blowing 😱#foryou #viral #programming #tipsandtricks #frontend
More from @codevibes_1
More breakout videos from this creator.
