I've tried everything from adding extra keyframes (0%, 1%, 100% or 0%, 99%, 100%) to setting -webkit-animation-fill-mode to forwards to the oft-mentioned -webkit-backface-visibility: hidden; trick mentioned in other threads, but I'm still seeing a flicker in my css keyframe animation at the start of almost every animation iteration in Safari 7 (both desktop and iOS). Chrome seems to be flicker-free.
JSBin: http://jsbin.com/julor/2/edit
HTML:
<div class="ripple"></div>
CSS:
body {
background-color: #90CBEA;
}
.ripple, .ripple:before, .ripple:after {
background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .15) 100%);
border-radius: 50%;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
}
.ripple:before, .ripple:after {
content: '';
display: block;
}
.ripple {
-webkit-animation-name: innerRipple;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
&:before {
-webkit-animation-name: ripple;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
}
&:after {
-webkit-animation-name: outerRipple;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
}
}
#-webkit-keyframes innerRipple {
from {
height: 0px;
width: 0px;
opacity: 1;
}
to {
height: 200px;
width: 200px;
opacity: 0;
}
}
#-webkit-keyframes ripple {
from {
height: 0px;
width: 0px;
opacity: 1;
}
to {
height: 300px;
width: 300px;
opacity: 0;
}
}
#-webkit-keyframes outerRipple {
from {
height: 0px;
width: 0px;
opacity: 1;
}
to {
height: 340px;
width: 340px;
opacity: 0;
}
}
Adding a frame in between a little earlier than at 99% made the flickering disappear on Safari! (Safari 8 OS X)
#-webkit-keyframes innerRipple {
0% { height: 0px; width: 0px; opacity: 1; }
95% { height: 200px; width: 200px; opacity: 0; }
100% { width: 0px; height: 0px; opacity: 0; }
}
#-webkit-keyframes ripple {
0% { height: 0px; width: 0px; opacity: 1; }
95% { height: 300px; width: 300px; opacity: 0; }
100% { width: 0px; height: 0px; opacity: 0; }
}
#-webkit-keyframes outerRipple {
0% { height: 0px; width: 0px; opacity: 1; }
95% { height: 340px; width: 340px; opacity: 0; }
100% { width: 0px; height: 0px; opacity: 0; }
}
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>
I have written this code to make a rectangle move from left to right like a car but this is not working. I think there is problem with #keyframes example
* {
margin: auto;
padding: 0px;
}
body {
background-color: lightgreen;
}
.main {
height: 100%;
width: 100%;
border: 1px solid black;
}
.road {
height: 300px;
width: 100%;
background-color: black;
margin-top: 25%;
}
#keyframes example {
from {
top: 20%;
left: 80%
}
20% {
top: 20%;
left: 60%
}
40% {
top: 20%;
left: 50%
}
60% {
top: 20%;
left: 30%
}
80% {
top: 20%;
left: 10%
}
to {
top: 20%;
left: 0%
}
}
#-webkit-keyframes example {
0% {
top: 20%;
left: 80%
}
20% {
top: 20%;
left: 60%
}
40% {
top: 20%;
left: 50%
}
60% {
top: 20%;
left: 30%
}
80% {
top: 20%;
left: 10%
}
100% {
top: 20%;
left: 0%
}
}
#-moz-keyframes example {
0% {
top: 20%;
left: 80%
}
20% {
top: 20%;
left: 60%
}
40% {
top: 20%;
left: 50%
}
60% {
top: 20%;
left: 30%
}
80% {
top: 20%;
left: 10%
}
100% {
top: 20%;
left: 0%
}
}
.car {
height: 100px;
width: 200px;
background-color: red;
font-size: 50px;
color: black;
text-align: center;
vertical-align: middle;
margin-top: 100px;
animation-name: example;
animation-duration: 10s;
animation-iteration-count: infinite;
-webkit-animation-name: example;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: example;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: infinite;
}
You need to use position: relative on .car to be displayed like that.
.car {
position: relative;
height:100px;
width:200px;
background-color: red;
font-size: 50px;
color:black;
text-align: center;
vertical-align: middle;
margin-top: 100px;
animation-name:example;
animation-duration: 10s;
animation-iteration-count: infinite;
-webkit-animation-name: example;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: example;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: infinite;
}
It seems that you're trying to move the car as if it were absolutely positioned. Make sure you have a wrapper that the car is inside of (In this case I'm assuming it's the road) and give that a relative position. Give you're car an absolute position. Here's a codepen I created that may help you!
https://codepen.io/anon/pen/MdYLOM
Also try making your animation like this:
#keyframes example {
0% { left: 0% }
100% { left: 100% }
}
I'm playing round with CSS animation by trying to replicate the following new google ads logo - example.
What is the best way to add the bounce effect on the green ball?
My current animation:
#keyframes greenblock {
0% {
top: 0px;
}
50% {
top: 45px;
}
100% {
bottom: 0px;
}
}
My code (fiddle):
.wrap {
border: 1px solid red;
height: 300px;
width: 300px;
position: relative
}
.blue-shape {
position: absolute;
left: 100px;
top: 0px;
width: 45px;
height: 45px;
background: #4285F4;
display: block;
border-radius: 45px;
animation: blueblock 2s forwards;
transform-origin: top center;
}
.yellow-shape {
position: absolute;
left: 122px;
top: 0px;
width: 45px;
height: 45px;
background: #FBBC04;
display: block;
border-radius: 45px;
animation: yellowblock 2s forwards;
transform-origin: top center;
}
.green-ball {
position: absolute;
border-radius: 45px;
width: 45px;
height: 45px;
background: #34A853;
animation: greenblock 1.5s forwards;
}
#keyframes blueblock {
0% {
height: 45px;
}
25% {
height: 140px;
transform: rotate(0deg);
}
50% {
transform: rotate(-30deg);
}
100% {
height: 140px;
transform: rotate(-30deg);
}
}
#keyframes yellowblock {
0% {
height: 45px;
opacity: 0;
}
25% {
height: 140px;
transform: rotate(0deg);
opacity: 0;
}
50% {
transform: rotate(30deg);
}
100% {
height: 140px;
transform: rotate(30deg);
opacity: 100;
left: 122px;
}
}
#keyframes greenblock {
0% {
top: 0px;
}
50% {
top: 45px;
}
100% {
bottom: 0px;
}
}
<div class="wrap">
<div class="yellow-shape">
<div class="green-ball">
</div>
</div>
<div class="blue-shape">
</div>
</div>
I've tried with this animation
animation: greenblock .6s ease-in-out .5s forwards;
and this set of keyframes
#keyframes greenblock {
0% { top: 0px; }
75% { top: calc(100% - 55px); }
50%, 100% { top: calc(100% - 45px); }
}
Demo
.wrap {
border: 1px solid red;
height: 300px;
width: 300px;
position: relative
}
.blue-shape {
position: absolute;
left: 100px;
top: 0px;
width: 45px;
height: 45px;
background: #4285F4;
display: block;
border-radius: 45px;
animation: blueblock 2s forwards;
transform-origin: top center;
}
.yellow-shape {
position: absolute;
left: 122px;
top: 0px;
width: 45px;
height: 45px;
background: #FBBC04;
display: block;
border-radius: 45px;
animation: yellowblock 2s forwards;
transform-origin: top center;
}
.green-ball {
position: absolute;
border-radius: 45px;
width: 45px;
height: 45px;
background: #34A853;
animation: greenblock .6s ease-in-out .5s forwards;
}
#keyframes blueblock {
0% {
height: 45px;
}
25% {
height: 140px;
transform: rotate(0deg);
}
50% {
transform: rotate(-30deg);
}
100% {
height: 140px;
transform: rotate(-30deg);
}
}
#keyframes yellowblock {
0% {
height: 45px;
opacity: 0;
}
25% {
height: 140px;
transform: rotate(0deg);
opacity: 0;
}
50% {
transform: rotate(30deg);
}
100% {
height: 140px;
transform: rotate(30deg);
opacity: 100;
left: 122px;
}
}
#keyframes greenblock {
0% { top: 0px; }
75% { top: calc(100% - 55px); }
50%, 100% { top: calc(100% - 45px); }
}
<div class="wrap">
<div class="yellow-shape">
<div class="green-ball">
</div>
</div>
<div class="blue-shape">
</div>
</div>
Update - The pen below has been updated to show the end results.
I am trying to mimic signal animation using css animation but I cant seem to grasp the idea of animation delay. If you look here
http://codepen.io/anon/pen/YwZOmK?editors=110
.real-time-animation {
margin-top: 20px;
position: relative;
transform: scale(0.5) rotate(45deg);
transform-origin: 5% 0%;
}
.real-time-animation>div {
animation: sk-bouncedelay 3s infinite forwards;
}
.circle1 {
animation-delay: 2s;
}
.circle2 {
animation-delay: 1s;
}
#keyframes sk-bouncedelay {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.circle {
position: relative;
width: 16em;
height: 16em;
border-radius: 50%;
background: transparent;
border: 20px solid transparent;
border-top-color: darkblue;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.circle2 {
top: 40px;
width: 12em;
height: 12em;
left: 33px;
}
.circle3 {
top: 80px;
width: 8em;
height: 8em;
left: 66px;
}
<div class="real-time-animation">
<div class="circle circle1"> </div>
<div class="circle circle2"> </div>
<div class="circle circle3"> </div>
</div>
You should be able to understand what I am trying to accomplish. I want to start from showing nothing, then after 1 sec show the first bar, then after 1 sec, show the 2nd bar and finally after another 1 sec show the 3rd bar.
My solution:
http://codepen.io/anon/pen/JGWmJg?editors=110
.real-time-animation{
margin-top: 20px;
position: relative;
transform: scale(0.5) rotate(45deg);
transform-origin: 5% 0%;
}
.circle1, .circle2, .circle3{
animation: 4s infinite ease-in;
animation-delay: 1s;
}
.circle1{
animation-name: circle1;
}
.circle2{
animation-name: circle2;
}
.circle3{
animation-name: circle3;
}
#keyframes circle1 {
0%{
opacity: 0;
}
25%{
opacity: 0;
}
50%{
opacity: 0;
}
75%{
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes circle2 {
0%{
opacity: 0;
}
25%{
opacity: 0;
}
50%{
opacity: 1;
}
75% {
opacity: 1;
}
100%{
opacity: 0;
}
}
#keyframes circle3 {
0%{
opacity: 0;
}
25%{
opacity: 1;
}
50%{
opacity: 1;
}
75% {
opacity: 1;
}
100%{
opacity: 0;
}
}
.circle {
position: relative;
width: 16em; height: 16em;
border-radius: 50%;
background: transparent;
border: 20px solid transparent;
border-top-color: darkblue;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.circle2{
top: 40px;
width: 12em;
height: 12em;
left: 33px;
}
.circle3{
top: 80px;
width: 8em;
height: 8em;
left: 66px;
}
You can change the speed of the animation duration: "animation: 4s infinite ease-in;"
As I understand your question animated opacity needs to be like this:
Progress \ Element
.circle1
.circle2
.circle3
0%
0
0
0
25%
0
0
1
50%
0
1
1
75%
1
1
1
100%
0
0
0
The opacity property is clamped which means if you set negative values, it will have the same effect as setting it to 0. The same goes for values larger than 1.
Using this property, we can subtract a constant value from predefined CSS variables and use that as opacity.
.real-time-animation {
zoom: 10;
width: 8px;
height: 8px;
position: relative;
display: inline-block;
}
.real-time-animation>.circle {
animation: circle 4s infinite ease-in;
}
.circle1 {
--circle: 1;
}
.circle2 {
--circle: 2;
}
.circle3 {
--circle: 3;
}
#keyframes circle {
0%, 100% {
opacity: 0;
}
25% {
opacity: calc(var(--circle) - 2);
}
50% {
opacity: calc(var(--circle) - 1);
}
75% {
opacity: 1;
}
}
.circle {
border-radius: 50%;
background: transparent;
border: 1px solid transparent;
border-top-color: darkblue;
position: absolute;
margin: 0;
box-sizing: border-box;
top: 100%;
left: 0%;
width: calc(16px - (var(--circle) - 1)*4px);
height: calc(16px - (var(--circle) - 1)*4px);;
transform: rotate(45deg) translate(-50%, -50%);
transform-origin: 0 0;
}
<div class="real-time-animation">
<div class="circle circle1"> </div>
<div class="circle circle2"> </div>
<div class="circle circle3"> </div>
</div>
How do I make the below animation fully work in safari browser ? It is working fine in Chrome.
Open the below link in chrome to see its full functionality (bounce and pulse effect), and in Safari to see the issue. Pulse effect around the pin doesn't work in safari!!
How can I fix this ?
Here is the JS FIDDLE link
html code:
<div class='pin bounce'></div>
<div class='pulse'></div>
CSS code:
body {
background: #e6e6e6;
}
.pin {
width: 30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: #00cae9;
position: absolute;
-webkit-transform: rotate(-45deg);
left: 50%;
top: 50%;
margin: -20px 0 0 -20px;
}
.pin:after {
content: "";
width: 14px;
height: 14px;
margin: 8px 0 0 8px;
background: #e6e6e6;
position: absolute;
border-radius: 50%;
}
.bounce {
-webkit-animation-name: bounce;
-webkit-animation-fill-mode: both;
-webkit-animation-duration: 1s;
}
.pulse {
background: #d6d4d4;
border-radius: 50%;
height: 14px;
width: 14px;
position: absolute;
left: 50%;
top: 50%;
margin: 11px 0px 0px -12px;
-webkit-transform: rotateX(55deg);
z-index: -2;
}
.pulse:after {
content: "";
border-radius: 50%;
height: 40px;
width: 40px;
position: absolute;
margin: -13px 0 0 -13px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0;
box-shadow: 0 0 1px 2px #00cae9;
-webkit-animation-delay: 1.1s;
}
#-webkit-keyframes pulsate {
0% {
-webkit-transform: scale(0.1, 0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: scale(1.2, 1.2);
opacity: 0;
}
}
#-webkit-keyframes bounce {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px) rotate(-45deg);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px) rotate(-45deg);
}
80% {
-webkit-transform: translateY(-10px) rotate(-45deg);
}
100% {
-webkit-transform: translateY(0) rotate(-45deg);
}
}