#-webkit-keyframes animation border - html

Question

I have a problem with CSS that I am trying to solve and at this point I need your help.
I have a #keyframes animation that changes the width of a class which have overflow hidden.
The animation has 9 frames and it is working perfectly at this point.
//the working code
h1.imgholder { // This is the object that will animate.
overflow: hidden;
height: 90px;
width: 415px;
margin-left: 46%;
-webkit-animation-name: example; // animation name
-webkit-animation-duration: 3.5s; //animation duration
animation-name: example; // animation name
animation-duration: 3.5s; //animation duration
}
.img {
float: left;
}
#-webkit-keyframes example {
0% {
width: 85px;
-webkit-animation-timing-function: linear;
}
24.51% {
width: 85px;
-webkit-animation-timing-function: linear;
}
25% {
width: 195px;
-webkit-animation-timing-function: linear;
}
49.51% {
width: 195px;
-webkit-animation-timing-function: linear;
}
50% {
width: 295px;
-webkit-animation-timing-function: linear;
}
74.51% {
width: 295px;
-webkit-animation-timing-function: linear;
}
75% {
width: 322px;
-webkit-animation-timing-function: linear;
}
99.51% {
width: 322px;
-webkit-animation-timing-function: linear;
}
100% {
width: 415px;
-webkit-animation-timing-function: linear;
}
}
Now what I want is that at some frames to add another animation property like border-right: solid #000;
Like at frame 1, 3, 5, 7, 9 = no border, frame 2, 4, 6, 8 = border-right: solid #000;
//code here for example "tried this, didn't work"
#-webkit-keyframes example {
0% {
width: 85px;
-webkit-animation-timing-function: linear;
}
24.51% {
width: 85px;
border-right: solid #000; //show border
-webkit-animation-timing-function: linear;
}
25% {
width: 195px;
-webkit-animation-timing-function: linear;
}
49.51% {
width: 195px;
border-right: solid #000; //show border
-webkit-animation-timing-function: linear;
}
50% {
width: 295px;
-webkit-animation-timing-function: linear;
}
74.51% {
width: 295px;
border-right: solid #000; //show border
-webkit-animation-timing-function: linear;
}
75% {
width: 322px;
-webkit-animation-timing-function: linear;
}
99.51% {
width: 322px;
border-right: solid #000; //show border
-webkit-animation-timing-function: linear;
}
100% {
width: 415px;
-webkit-animation-timing-function: linear;
}
}
What am I doing wrong? How can I make this class that it will show border on specific frames, and remove or "hide" them on other frames.
Any help is appreciated, thanks for your time and sorry for my bad english :p.

Answer 1

I can't quite figure out why it works this way but the animation seems to work well only when you set the border-right on the parent element. As you can see in the below snippet, once that is done the rest of your code works fine.
Also, based on your statement remove or "hide" them on other frames, you may want to consider adding a border-right: none in the other frames because once a property is added in one frame it doesn't go away unless removed. I have added both versions in the snippet for the difference to be visible.
h1.imgholder {
overflow: hidden;
height: 90px;
width: 415px;
-webkit-animation-name: example;
-webkit-animation-duration: 3.5s;
-webkit-animation-timing-function: linear;
animation-name: example;
animation-duration: 3.5s;
animation-timing-function: linear;
border-right: 1px solid transparent;
}
.img {
float: left;
}
#-webkit-keyframes example {
0% {
width: 85px;
}
24.51% {
width: 85px;
border-right: 1px solid #000;
}
25% {
width: 195px;
}
49.51% {
width: 195px;
border-right: 1px solid #000;
}
50% {
width: 295px;
}
74.51% {
width: 295px;
border-right: 1px solid #000;
}
75% {
width: 322px;
}
99.51% {
width: 322px;
border-right: 1px solid #000;
}
100% {
width: 415px;
}
}
/* Just for demo */
h1.imgholder#two{
-webkit-animation-name: example2;
-webkit-animation-duration: 3.5s;
-webkit-animation-timing-function: linear;
animation-name: example2;
animation-duration: 3.5s;
animation-timing-function: linear;
border-right: 1px solid transparent;
}
#-webkit-keyframes example2 {
0% {
width: 85px;
border-right: none;
}
24.51% {
width: 85px;
border-right: 1px solid #000;
}
25% {
width: 195px;
border-right: none;
}
49.51% {
width: 195px;
border-right: 1px solid #000;
}
50% {
width: 295px;
border-right: none;
}
74.51% {
width: 295px;
border-right: 1px solid #000;
}
75% {
width: 322px;
border-right: none;
}
99.51% {
width: 322px;
border-right: 1px solid #000;
}
100% {
width: 415px;
border-right: none;
}
}
<h1 class="imgholder">
<img src="http://lorempixel.com/100/100" alt="" class='img'>
</h1>
<!-- Just for demo -->
<h1 class="imgholder" id ='two'>
<img src="http://lorempixel.com/100/100" alt="" class='img'>
</h1>