brozek/website
1
0
Fork 0
mirror of https://github.com/Brandon-Rozek/website.git synced 2024-11-09 10:40:34 -05:00
Code Issues Projects Releases Packages Wiki Activity
website/content/blog/2015-05-23-animatable-border.md

4.7 KiB
Raw Blame History

id title date author layout guid aliases permalink medium_post dsq_thread_id mf2_cite tags
85 Animatable: Border 2015-05-23T19:59:25+00:00 Brandon Rozek post http://brandonrozek.com/?p=85
/2015/05/animatable-border/
/2015/05/animatable-border/
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;}
3807156267
3807156267
a:1:{s:6:"author";a:0:{}}
a:1:{s:6:"author";a:0:{}}
Web
CSS

This is part 1 of an animation series I’m doing. It is inspired by Lea Verou’s talk called “The Humble Border-Radius.” I looked at her site and she has a good demo of a bunch of different animations here. My goal here is to create a more comprehensive guide to these different animatable properties–mainly for future reference. Animations play a big part in adding interactivity to the web, so why not explore some possible options?

This post follows well along with my Codepen demo{.broken_link}, where I’ll state the box number that applies to what I’m talking about. **Initial values must be explicitly stated, implicit initial values are generally ignored in animation** *\*In English terms, you must have already stated a value for what you are animating before you animate it**

Border-color

  • Accepts 1 to 4 color values
  • Each value corresponds to each side of the border (starting from the top and going clockwise)
  • Initial Value: currentColor

Border-color animates by splitting the colors to their red, green and blue components and raises/lowers them to it’s new value. (Demo{.broken_link}) (Spec) Example of animation corresponds to #1 in the pen, but I will rewrite the relevant code here.

@keyframes color {
    to { border-color: purple red green blue; }
}

.border-color {
    border-color: white;
    animation: color .4s ease-in .1s infinite alternate;
}

 

Border-radius

  • Accepts 1 to 4 values for both horizontal and vertical radii
  • Each value corresponds to a corner starting from the top left and going clockwise
  • Initial Value: 0
.border-radius {
    border-radius: 40% 30% 60% 50% / 20% 40% 60% 80%;
    /** is the same as **/
    border-top-left-radius: 40% 20%;
    border-top-right-radius: 30% 40%;
    border-bottom-right-radius: 60% 60%;
    border-bottom-left-radius: 50% 80%;
    /** where the first value is the horizontal
    radius and the second value the vertical radius **/
}

For animation, this corresponds to #2 in the pen I made at the top. I’ll repeat the relevant code here.

@keyframes radius {
    to { border-radius: 20%; }
}

.border-radius {
    border-radius: 0;
    animation: radius .5s ease-in .1s infinite alternate;
}

 

Border-width

  • Accepts 1 to 4 values
  • Each value corresponds to a side of the border (starting from the top and going clockwise)
  • Initial Value: medium

For animation, this corresponds to #3 in the pen I made at the top. I’ll repeat the relevant code here.

@keyframes width {
    to { border-width: .15rem .25rem .15rem .25rem; }
}

.border-width {
    border-width: .7rem;
    animation: width .5s ease-in .1s infinite alternate;
}

 

Conclusion

Animations are quite enjoyable. The last box in my Codepen demo tries combining all three of those animations. (Super Wacky!)  You don’t need to use keyframe animations to achieve this, you can also use the transition property. I used keyframes so you can better visualize what’s going on. There are plenty of other animatable properties to go through, so I’ll get started on those. In the meantime, if you want to look at some of the sites I used for research I’ll include the links below.