5.1 KiB
| id | title | date | author | aliases | permalink | medium_post | mf2_cite | tags | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 297 | Animatable: Visual | 2015-10-11T16:52:36+00:00 | Brandon Rozek |
|
/2015/10/animatable-visual/ |
|
|
|
Hello everyone! This is part 5 of my series on animation. Today’s post will be short, since we’re only going to talk about color and opacity.
I’ll give a shout-out to http://csstriggers.com, if you are interested in CSS Animation performance, then check them out to see what triggers a repaint and/or reflow. Take a look at the other posts in this series!
- Part 1 — Animatable: Border
- Part 2 — Animatable: Box Model
- Part 3 — Animatable: Text
- Part 4 — Animatable: Location
This post goes with a Codepen demo{.broken_link} I made, I’ll reference it later in this post.
color
- Accepts any color value
- Typically inherits it’s color from the parent element
The color property sets the color of an element’s text content and its decoration. During the animation, the browser sees the colors in their red, green, and blue (rgb) components, then increments/decrements those values until it reaches the color it’s animating to. For example, in the Codepen demo (#1), the color of the text is changing from red or rgb(255, 0, 0) to green or rgb(0, 255, 0). Meaning the red component is going from 255 to 0 and the green component is going from 0 to 255 during the animation.
@keyframes color {
to { color: green; }
}
.color {
font-size: 2rem;
color: red;
text-decoration: underline;
animation: color 1.5s ease-in 0s infinite alternate;
}
opacity
- Accepts any number from [0, 1]
- Initial Value: 1
Opacity sets the transparency of an element and it’s decendants. Unlike display: none;, when the element is opacity: 0; the element still holds it’s space on the page. In the Codepen demo (#2), you can see the element and it’s children fading out.
@keyframes opacity {
to { opacity: 0; }
}
.opacity {
height: 5rem;
width: 5rem;
background-color: #cd86e4;
opacity: 1;
animation: opacity 2s linear 0s infinite alternate;
}
.opacity div {
margin-left: auto;
margin-right: auto;
height: 3rem;
width: 3rem;
background-color: lightblue;
}
.opacity div div {
margin-left: auto;
margin-right: auto;
height: 1rem;
width: 1rem;
background-color: #00b300;
}
Conclusion
I used to work on a chat application called Babbler. In it, I used opacity to fade in the messages as the user recieved them. With all these different types of animations, you can visually show the user what’s going on in your website/application. Doing this series helps me, (as well as you, I hope) recognize all the different properties and possibilities for animation. This is the second to last part of this series, meaning that the next part is the finale. I’m somewhat sad to see this series ending but excited at the same time. Until next time, have fun animating. 🙂