I am experimenting with some keyframe animations in css which seem to work fine in IE, Chrome, Firefox but not in Microsoft Edge for some reason. I get this flicker at the end of the animation where I guess it shows their final position and sets the opacity to 1 before hiding them once again and restarting the animation. My code is as follows (This is minified for one bubble, but the link below is a codepen for the whole animation):
HTML:
<div class="canvas">
<div class="bubble"></div>
</div>
CSS:
.canvas {
min-height: 100%;
width: 100%;
background: green;
position: absolute;
overflow: hidden;
}
.bubble {
display: block;
border-radius: 100%;
opacity: 0.8;
position: absolute;
}
.bubble:nth-child(1) {
background: radial-gradient(ellipse at center, #E6EBF2 0%, #E6EBF2 46%, #EFF0EC 100%);
width: 7px;
height: 7px;
left: 13vw;
bottom: 52vh;
-webkit-animation: move1 infinite 10s;
animation: move1 infinite 10s;
}
#-webkit-keyframes move1 {
0% {
bottom: -100px;
}
100% {
bottom: 44vh;
-webkit-transform: translate(10px, 0);
transform: translate(10px, 0);
opacity: 0;
}
}
#keyframes move1 {
0% {
bottom: -100px;
}
100% {
bottom: 44vh;
-webkit-transform: translate(10px, 0);
transform: translate(10px, 0);
opacity: 0;
}
}
Here is a codepen i created:
https://codepen.io/anon/pen/BqqMKe
Any help would be appreciated as I can't seem to figure it out.
Related
The issue is visible when animating the skewY() property. Looks like the element's width shrinks down a little and no longer touches the sides of an equally wide container.
The same does not happen when animating with skewX() - the height is animated as expected.
I'm experiencing the bug in Safari only, both desktop and mobile browsers. Firefox and Chrome work as expected. This issue is visible during transition or animations only.
GIF previews:
Animation in Firefox/Chrome
Animation in Safari
.arrow {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
background-color: rgb(230, 230, 230);
}
.rect-x {
position: absolute;
left: calc(50vw - 50px);
top: 0;
width: 100px;
height: 100%;
background-color: blue;
animation: skew-x 1s linear alternate infinite;
transform-origin: center;
}
.rect-y {
position: absolute;
left: 0;
top: calc(50vh - 50px);
width: 100%;
height: 100px;
background-color: red;
animation: skew-y 1s linear alternate infinite;
transform-origin: center;
}
#keyframes skew-x {
0% { transform: skewX(15deg) skewY(0); }
to { transform: skewX(-15deg) skewY(-0);}
}
#keyframes skew-y {
0% { transform: skewX(0) skewY(15deg); }
to { transform: skewX(0) skewY(-15deg); }
}
<div class="arrow">
<div class="rect-y"></div>
<div class="rect-x"></div>
</div>
Try to use browser prefix.
.arrow {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
background-color: rgb(230, 230, 230);
}
.rect-x {
position: absolute;
left: calc(50vw - 50px);
top: 0;
width: 100px;
height: 100%;
background-color: blue;
animation: skew-x 1s linear alternate infinite;
-webkit-animation: skew-x 1s linear alternate infinite;
transform-origin: center;
-webkit-transform-origin: center;
}
.rect-y {
position: absolute;
left: 0;
top: calc(50vh - 50px);
width: 100%;
height: 100px;
background-color: red;
animation: skew-y 1s linear alternate infinite;
-webkit-animation: skew-y 1s linear alternate infinite;
transform-origin: center;
-webkit-transform-origin: center;
}
#keyframes skew-x {
0% { transform: skewX(15deg) skewY(0); }
to { transform: skewX(-15deg) skewY(-0);}
}
#-webkit-keyframes skew-x {
0% { -webkit-transform: skewX(15deg) skewY(0); }
to { -webkit-transform: skewX(-15deg) skewY(-0);}
}
#keyframes skew-y {
0% { transform: skewX(0) skewY(15deg); }
to { transform: skewX(0) skewY(-15deg); }
}
#-webkit-keyframes skew-y {
0% { -webkit-transform: skewX(0) skewY(15deg); }
to { -webkit-transform: skewX(0) skewY(-15deg); }
}
<div class="arrow">
<div class="rect-y"></div>
<div class="rect-x"></div>
</div>
In firefox pseudo elements are behind the div (this is what I wanted to achieve) but in chrome they are on top. Is this a bug in chrome? Anyone knows how to fix this? Adding z-index to the div didn't help me to solve this problem.
I've also tried to apply some styles to div:hover but then when I hover over the div element it falls behind pseudo elements (in Firefox, in Chrome pseudo elements are already on top).
Demo on codepen https://codepen.io/mariuszdaniel/pen/rzdyRV?editors=1100
#keyframes spin {
from {
transform: rotate(0turn)
translateY(-100%) translateY(50%)
rotate(1turn)
}
to {
transform: rotate(1turn)
translateY(-100%) translateY(50%)
rotate(0turn);
}
}
#keyframes spin-rev {
from {
transform: rotate(1turn)
translateY(-100%) translateY(50%)
rotate(0turn)
}
to {
transform: rotate(0turn)
translateY(-100%) translateY(50%)
rotate(1turn);
}
}
#keyframes glow {
from {
filter: blur(100px);
opacity: 0.8
}
to {
filter: blur(200px);
opacity: 0.4;
}
}
.path {
width:300px;
height: 300px;
padding: 20px;
margin: 100px auto;
border-radius: 50%;
background-image: url(https://unsplash.it/300);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
transition: transform 0.5s, box-shadow 0.5s;
}
.path:hover {
transform: scale(1.25);
box-shadow: 0 0 50px 0 #3333;
}
.path::before, .path::after {
content: "";
position:aboslute;
display: block;
width: 75%;
height: 75%;
margin: 25% auto 0;
border-radius: 50%;
/*filter: blur(100px); */
/*opacity: 0.5;*/
}
.path::before {
/*mix-blend-mode: hue;*/
z-index: -200;
background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
animation: spin 9s infinite /*alternate*/ linear, glow 3s infinite alternate linear;
}
.path::after {
margin-top: -100%;
z-index: -100;
background-color: #08AEEA;
background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
animation: spin-rev 6s infinite /*alternate-reverse*/ linear, glow 6s infinite alternate linear;
}
<div class="path"></div>
I try to animate two blocks with css animation. Its have the same transform animation but one of it has background-color animation also. This animations splitted to two #keyframes.
See code (https://codepen.io/mctep/pen/Rgyaep):
<style>
.a {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: red;
animation: a 1s infinite;
}
.b {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: gray;
animation: b 1s infinite;
}
#keyframes a {
0% {
background-color: red;
transform: translateX(0);
}
50% {
background-color: green;
transform: translateX(100px);
}
100% {
background: red;
}
}
#keyframes b {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
}
</style>
<div class="a"></div>
<div class="b"></div>
Animation of colored block is lag from gray block In Google Chrome. In Safary and FF it works perfectly.
I can to make one #keyframes for background and other for transform and it solves problem. But I want to use single value of animation property for single element. If there are no any ways to fix it I'll separate moving and coloring animations.
Why this happens? Is it Google Chrome bug?
Couldn't give you a concrete reason why this happens, but we can un-confuse Chrome by simply specifying a background-color in animation B as well.
#keyframes b {
0% {
background-color: gray; /* add this */
transform: translateX(0);
}
}
.a {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: red;
animation: a 1s infinite;
}
.b {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: gray;
animation: b 1s infinite;
}
#keyframes a {
0% {
background-color: red;
transform: translateX(0);
}
50% {
background-color: green;
transform: translateX(100px);
}
100% {
background: red;
}
}
#keyframes b {
0% {
background-color: gray;
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
}
<div class="a"></div>
<div class="b"></div>
I am trying to move a background but it seems quite stuck.
How can I move it?
body {
background-color: black !important;
}
#background_div {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: -1;
width: 100%;
height: 100%;
background-image: url("http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg");
background-position: center;
background-repeat: no-repeat;
animation-name: background_animation;
}
#keyframes background_animation {
0% {
transform: translate(0%, -100%) scale(4, 4);
}
25% {
transform: translate(100%, 0%) scale(5, 5);
}
50% {
transform: translate(50%, 100%) scale(6, 6);
}
100% {
transform: translate(0%, -100%) scale(4, 4);
}
}
<div id="background_div"></div>
https://jsfiddle.net/5he2otzL/
The problem in your case is that you've set only the animation-name to #background_div but have not set any value for the animation-duration. The default value for animation-duration is 0s and that for the animation-fill-mode is none. So, as per the spec, the animation has no visible effect.
Below is the extract from the specs: (emphasis is mine).
If the <time> is 0s, like the initial value, the keyframes of the animation have no effect, but the animation itself still occurs instantaneously. Specifically, start and end events are fired; if animation-fill-mode is set to backwards or both, the first frame of the animation, as defined by animation-direction, will be displayed during the animation-delay. Then the last frame of the animation, as defined by animation-direction, will be displayed if animation-fill-mode is set to forwards or both. If animation-fill-mode is set to none then the animation has no visible effect.
Once you set some value other than 0s to animation-duration property, the animation works fine.
body {
background-color: black !important;
}
#background_div {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: -1;
width: 100%;
height: 100%;
background-image: url("http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg");
background-position: center;
background-repeat: no-repeat;
animation-name: background_animation;
animation-duration: 2s; /* set this */
}
#keyframes background_animation {
0% {
transform: translate(0%, -100%) scale(4, 4);
}
25% {
transform: translate(100%, 0%) scale(5, 5);
}
50% {
transform: translate(50%, 100%) scale(6, 6);
}
100% {
transform: translate(0%, -100%) scale(4, 4);
}
}
<div id="background_div"></div>
body {
background-color: black !important;
}
#background_div {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: -1;
width: 100%;
height: 100%;
background-image: url("http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg");
background-position: center;
background-repeat: no-repeat;
-webkit-animation: background_animation 5s infinite; /* Chrome, Safari, Opera */
animation: background_animation 5s infinite;
}
#keyframes background_animation {
0% {
transform: translate(0%,-100%) scale(4,4);
}
25% {
transform: translate(100%,0%) scale(5,5);
}
50% {
transform: translate(50%,100%) scale(6,6);
}
100% {
transform: translate(0%,-100%) scale(4,4);
}
}
Fixed it for you hope it helps,
Easy reads:
http://www.w3schools.com/cssref/css3_pr_animation.asp
https://jsfiddle.net/5he2otzL/
I'm trying out a CSS3 animation on a background image. Everything's working well, the problem is that on Chrome the text ends up being blurred when the animation is in progress:
During Animation:
Turning off the animation:
As you can see the text rendering is fine when the animation is turned off, I know there's the usual issue with text rendering but I can't understand why the rendering is poor on Chrome when the animation is in progress. I'm not sure there's anything I can do about it really. I've tested the animation on Firefox and IE and it's ok. By the way I'm working on Windows.
Firefox:
IE:
EDIT
.bg-div {
position: fixed;
width: 110%;
height: 110%;
transform: translate(-5%, -5%);
-moz-transform: translate(-5%, -5%) rotate(0.02deg); /* rotation to solve choppy animation on Firefox */
-ms-transform: translate(-5%, -5%);
background-image: url('images/colour-test.jpg');
background-size: cover;
-webkit-animation: bg-animation 10s linear infinite;
-moz-animation: bg-animation 10s linear infinite;
-ms-animation: bg-animation 10s linear infinite;
}
#-webkit-keyframes bg-animation {
25% { transform: translate(-5.5%, -5.5%); }
50% { transform: translate(-5.3%, -4.9%); }
75% { transform: translate(-4.8%, -4.3%); }
}
#-moz-keyframes bg-animation {
25% { -moz-transform: translate(-5.5%, -5.5%) rotate(0.02deg); }
50% { -moz-transform: translate(-5.3%, -4.9%) rotate(0.02deg); }
75% { -moz-transform: translate(-4.8%, -4.3%) rotate(0.02deg); }
}
#-ms-keyframes bg-animation {
25% { -ms-transform: translate(-5.5%, -5.5%); }
50% { -ms-transform: translate(-5.3%, -4.9%); }
75% { -ms-transform: translate(-4.8%, -4.3%); }
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 65%;
text-align: center;
}
After reading the question and answer posted in the comments I've tried to adding -webkit-font-smoothing: subpixel-antialiased; to .bg-div but that didn't make any difference.
EDIT 2
Okay so this is a bit of a weird one, during the animation apparently the position: fixed is making the text blurry. I don't know how that is possible, anyway once I removed the position: fixed and the background was animating the text was displayed correctly. It's still not what I want because I need the background to be fixed.
In my testing, the problem is fixed if the transform is not used on .content. Luckily, you don't need to use transform to position your content div.
Use this margin: auto trick to position instead
Using this method, you do not need to use transform: translate(-50%, -50%)
The content is centered with the combination of top, right, bottom, left, margin: auto and the percentage width and height.
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 50%;
height: 65%;
text-align: center;
}
Working Example
body { margin: 0 auto; width: 500px }
.bg-div {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 800px;
height: 800px;
transform: translate(-5%, -5%);
background: url('http://www.placehold.it/800') no-repeat;
-webkit-animation: bg-animation 2s linear infinite;
animation: bg-animation 2s linear infinite;
}
#-webkit-keyframes bg-animation {
0% {
transform: translate(-5.5%, -5.5%);
}
50% {
transform: translate(-5%, -5%);
}
100% {
transform: translate(-5.5%, -5.5%);
}
}
#keyframes bg-animation {
0% {
transform: translate(-5.5%, -5.5%);
}
50% {
transform: translate(-5%, -5%);
}
100% {
transform: translate(-5.5%, -5.5%);
}
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 50%;
height: 65%;
text-align: center;
}
<div class="bg-div"></div>
<div class="content">
<h1>This looks better</h1>
<input value="Text" />
</div>