Check out this code snippet: https://jsfiddle.net/3e5sqe36/1. I'm attempting to animate a fixed position div, however, when I apply the animation, it ends up getting pushed off the top of the screen.
I came across this query on Stack Overflow: How can I use CSS animations to make a fixed position element slide from the bottom to the top?. I tried adding "bottom left" to the initial keyframe of the animation as suggested but it didn't solve the issue for me.
Take a look at the CSS code below:
.animated {
-webkit-animation-name: pulse;
-webkit-animation-duration: .1s;
-webkit-animation-iteration-count: inifinite;
animation-name: pulse;
animation-duration: .1s;
animation-iteration-count: infinite;
}
@-webkit-keyframes pulse {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.1); }
100% { -webkit-transform: scale(1); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}