website/content/blog/2015-05-23-animatable-border.md

130 lines
4.8 KiB
Markdown
Raw Normal View History

2020-01-15 21:51:49 -05:00
---
id: 85
title: 'Animatable: Border'
date: 2015-05-23T19:59:25+00:00
author: Brandon Rozek
layout: post
guid: http://brandonrozek.com/?p=85
permalink: /2015/05/animatable-border/
medium_post:
- '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;}'
dsq_thread_id:
- "3807156267"
- "3807156267"
tumblr_post_id:
- "135657818649"
- "135657818649"
mf2_cite:
- 'a:1:{s:6:"author";a:0:{}}'
- 'a:1:{s:6:"author";a:0:{}}'
kind:
- article
---
This is part 1 of an animation series I’m doing. It is inspired by Lea Verou’s talk called “[The Humble Border-Radius.](https://www.youtube.com/watch?v=JSaMl2OKjfQ)” I looked at her site and she has a good demo of a bunch of different animations [here](http://lea.verou.me/2011/10/animatable-a-css-transitions-gallery/). 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?
<!--more-->
This post follows well along with my Codepen [demo](http://codepen.io/brandonrozek/full/waWMWR/){.broken_link}, where I&#8217;ll state the box number that applies to what I&#8217;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 {#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&#8217;s new value. ([Demo](http://codepen.io/brandonrozek/pen/PqzPMe){.broken_link}) ([Spec](http://www.w3.org/TR/css3-transitions/#animtype-color)) Example of animation corresponds to #1 in the pen, but I will rewrite the relevant code here.
<pre><code class="language-css">
@keyframes color {
to { border-color: purple red green blue; }
}
.border-color {
border-color: white;
animation: color .4s ease-in .1s infinite alternate;
}
</code></pre>
 
### Border-radius {#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
<pre><code class="language-css">
.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**/
}
</code></pre>
For animation, this corresponds to #2 in the pen I made at the top. I&#8217;ll repeat the relevant code here.
<pre><code class="language-css">
@keyframes radius {
to { border-radius: 20%; }
}
.border-radius {
border-radius: 0;
animation: radius .5s ease-in .1s infinite alternate;
}
</code></pre>
 
### Border-width {#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&#8217;ll repeat the relevant code here.
<pre><code class="language-css">
@keyframes width {
to { border-width: .15rem .25rem .15rem .25rem; }
}
.border-width {
border-width: .7rem;
animation: width .5s ease-in .1s infinite alternate;
}
</code></pre>
 
### Conclusion
Animations are quite enjoyable. The last box in my Codepen demo tries combining all three of those animations. (Super Wacky!)  You don&#8217;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&#8217;s going on. There are plenty of other animatable properties to go through, so I&#8217;ll get started on those. In the meantime, if you want to look at some of the sites I used for research I&#8217;ll include the links below. <https://developer.mozilla.org/en-US/docs/Web/CSS/animation> <http://www.w3.org/TR/css3-transitions/#animatable-css> <https://developer.mozilla.org/en-US/docs/Web/CSS/border-color> <https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius> <https://developer.mozilla.org/en-US/docs/Web/CSS/border-width> <https://docs.webplatform.org/wiki/css/properties/border-color>{.broken_link} <https://docs.webplatform.org/wiki/css/properties/border-radius>{.broken_link} <https://docs.webplatform.org/wiki/css/properties/border-width>{.broken_link}