website/content/blog/2015-10-11-animatable-visual.md

5.1 KiB
Raw Blame History

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/
/2015/10/animatable-visual/
O:11:"Medium_Post":11:{s:16:"author_image_url";N;s:10:"author_url";N;s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";N;s:2:"id";N;s:21:"follower_notification";N;s:7:"license";N;s:14:"publication_id";N;s:6:"status";N;s:3:"url";N;}
O:11:"Medium_Post":11:{s:16:"author_image_url";s:74:"https://cdn-images-1.medium.com/fit/c/200/200/1*dmbNkD5D-u45r44go_cf0g.png";s:10:"author_url";s:32:"https://medium.com/@brandonrozek";s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";s:2:"no";s:2:"id";s:12:"c1119f67e27a";s:21:"follower_notification";s:2:"no";s:7:"license";s:19:"all-rights-reserved";s:14:"publication_id";s:2:"-1";s:6:"status";s:6:"public";s:3:"url";s:63:"https://medium.com/@brandonrozek/animatable-visual-c1119f67e27a";}
O:11:"Medium_Post":11:{s:16:"author_image_url";s:74:"https://cdn-images-1.medium.com/fit/c/200/200/1*dmbNkD5D-u45r44go_cf0g.png";s:10:"author_url";s:32:"https://medium.com/@brandonrozek";s:11:"byline_name";N;s:12:"byline_email";N;s:10:"cross_link";s:2:"no";s:2:"id";s:12:"c1119f67e27a";s:21:"follower_notification";s:2:"no";s:7:"license";s:19:"all-rights-reserved";s:14:"publication_id";s:2:"-1";s:6:"status";s:6:"public";s:3:"url";s:63:"https://medium.com/@brandonrozek/animatable-visual-c1119f67e27a";}
a:1:{s:6:"author";a:0:{}}
a:1:{s:6:"author";a:0:{}}
Web
CSS

Hello everyone! This is part 5 of my series on animation. Todays post will be short, since were only going to talk about color and opacity.

Ill 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!

This post goes with a Codepen demo{.broken_link} I made, Ill reference it later in this post.

color

  • Accepts any color value
  • Typically inherits its color from the parent element

The color property sets the color of an elements 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 its 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 its decendants. Unlike display: none;, when the element is opacity: 0; the element still holds its space on the page. In the Codepen demo (#2), you can see the element and its 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 whats 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. Im somewhat sad to see this series ending but excited at the same time. Until next time, have fun animating. 🙂