Animation and CSS columns in Google Chrome
I am facing some problems with animating icons in Google Chrome. I've tested this in Safari and Firefox and my code works there, so I'm not sure if this is a bug on my part or a browser issue. I code the icons in columns to stack evenly in a flexible layout, but when I put them in columns, all icons except the first move down the page.
Any help in determining what I am doing wrong or helping to find a workaround would be greatly appreciated. I have cut out media queries in my code for simplicity by posting it here.
#pptoc {
background-color: #3f72a5;
text-align: center;
color: #a1c0d0;
margin: 0;
width: 100%;
padding: 35px 0px;
-webkit-columns: 6;
-moz-columns: 6;
columns: 6;
}
#pptoc img {}
#pptoc a {
text-decoration: none;
color: #a1c0d0;
}
@-webkit-keyframes wiggle {
0% {
-webkit-transform: rotate(4deg);
}
50% {
-webkit-transform: rotate(-4deg);
}
100% {
-webkit-transform: rotate(4deg);
}
}
.pptocitem:hover {
-webkit-animation: wiggle 0.2s 1;
}
<div id="pptoc">
<div class="pptocsect"><img src="http://placehold.it/100x100?text=im1" class="pptocitem"><br>part 1</a>
</div>
<div class="pptocsect"><img src="http://placehold.it/100x100?text=im2" class="pptocitem"><span class="test1"><br>part 2</a></div>
<div class="pptocsect"><img src="http://placehold.it/100x100?text=im3" class="pptocitem"><br>part 3</a></div>
<div class="pptocsect"><img src="http://placehold.it/100x100?text=im4" class="pptocitem"><br>part 4</a></div>
<div class="pptocsect"><img src="http://placehold.it/100x100?text=im5" class="pptocitem"><br>part 5</a></div>
<div class="part 6"><img src="http://placehold.it/100x100?text=im6" class="pptocitem"><br>part 6</a></div>
source to share
You can use flex
CSS instead columns
and those elements will stay in place. Flexbox also gives you more positioning options.
By the way, you have a bunch of closed tags a
and an unclosed onespan
#pptoc {
background-color: #3f72a5;
text-align: center;
color: #a1c0d0;
margin: 0;
padding: 35px 0px;
display: flex;
justify-content: space-around;
}
#pptoc a {
text-decoration: none;
color: #a1c0d0;
}
@-webkit-keyframes wiggle {
0% {
-webkit-transform: rotate(4deg);
}
50% {
-webkit-transform: rotate(-4deg);
}
100% {
-webkit-transform: rotate(4deg);
}
}
.pptocitem:hover {
-webkit-animation: wiggle 0.2s 1;
}
<div id="pptoc">
<div class="pptocsect"><img src="http://placehold.it/100x100?text=im1" class="pptocitem"><br>part 1
</div>
<div class="pptocsect"><img src="http://placehold.it/100x100?text=im2" class="pptocitem"><span class="test1"><br>part 2</span></div>
<div class="pptocsect"><img src="http://placehold.it/100x100?text=im3" class="pptocitem"><br>part 3</div>
<div class="pptocsect"><img src="http://placehold.it/100x100?text=im4" class="pptocitem"><br>part 4</div>
<div class="pptocsect"><img src="http://placehold.it/100x100?text=im5" class="pptocitem"><br>part 5</div>
<div class="part 6"><img src="http://placehold.it/100x100?text=im6" class="pptocitem"><br>part 6</div>
source to share
You can use flexbox, as suggested by Michael Cocker, or you can use a CSS property will-change
that tells the browser to expect certain changes to a specific element and prepare for that change.
See how the flickering was fixed .pptocitem
on hover:
#pptoc {
background-color: #3f72a5;
text-align: center;
color: #a1c0d0;
margin: 0;
width: 100%;
padding: 35px 0px;
-webkit-columns: 6;
-moz-columns: 6;
columns: 6;
}
#pptoc img {}
#pptoc a {
text-decoration: none;
color: #a1c0d0;
}
@-webkit-keyframes wiggle {
0% {
-webkit-transform: rotate(4deg);
}
50% {
-webkit-transform: rotate(-4deg);
}
100% {
-webkit-transform: rotate(4deg);
}
}
.pptocitem {
will-change: transform;
}
.pptocitem:hover {
-webkit-animation: wiggle 0.2s 1;
}
<div id="pptoc">
<div class="pptocsect"><img src="http://placehold.it/100x100?text=im1" class="pptocitem"><br>part 1</a>
</div>
<div class="pptocsect"><img src="http://placehold.it/100x100?text=im2" class="pptocitem"><span class="test1"><br>part 2</a></div>
<div class="pptocsect"><img src="http://placehold.it/100x100?text=im3" class="pptocitem"><br>part 3</a></div>
<div class="pptocsect"><img src="http://placehold.it/100x100?text=im4" class="pptocitem"><br>part 4</a></div>
<div class="pptocsect"><img src="http://placehold.it/100x100?text=im5" class="pptocitem"><br>part 5</a></div>
<div class="part 6"><img src="http://placehold.it/100x100?text=im6" class="pptocitem"><br>part 6</a></div>
Hooray!
source to share