Css animation keyframes not working on Safari 11 - css

I have a css keyframes background animation working on Chrome but not on Sarari 11 (Mac). I tried to add -webkit- prefix, it's not working and not necessary anymore.
Any idea please ?
button {
height: 34px;
line-height: 18px;
font-weight: 700;
font-size: 14px;
position: absolute;
bottom: 60px;
animation-name: shiny;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#keyframes shiny{
0% {
background-repeat: no-repeat;
background-size: 300px 300px;
background-position: -300px -300px;
background-image: -webkit-linear-gradient(
top left,
rgba(255, 255, 255, 0.0) 0%,
rgba(255, 255, 255, 0.0) 45%,
rgba(255, 255, 255, 0.4) 49%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0.4) 51%,
rgba(255, 255, 255, 0.0) 55%,
rgba(255, 255, 255, 0.0) 100%
);
}
100% {
background-repeat: no-repeat;
background-position: 300px 300px;
}
}


I tried a simple example, it works normally
<html>
<head>
<title>Blue Glow</title>
<style>
#-webkit-keyframes glow {
0% { background-color: blue; }
100% { background-color: red; }
}
div {
-webkit-animation-name: glow;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
}
</style>
</head>
<body>
<div> <p>I tried a simple example, it works normally.</p>
</div>
</body>
</html


I found a nice solution, working for Chrome and Safari :
button {
height: 34px;
line-height: 18px;
font-weight: 700;
font-size: 14px;
position: absolute;
bottom: 60px;
animation-name: shiny;
animation-duration: 5s;
animation-iteration-count: infinite;
background-repeat: no-repeat;
background-size: 300px 300px;
background-position: -300px -300px;
background-image: -webkit-linear-gradient(
top left,
rgba(255, 255, 255, 0.0) 0%,
rgba(255, 255, 255, 0.0) 45%,
rgba(255, 255, 255, 0.4) 49%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0.4) 51%,
rgba(255, 255, 255, 0.0) 55%,
rgba(255, 255, 255, 0.0) 100%
);
}
#keyframes shiny{
100% {
background-repeat: no-repeat;
background-position: 300px 300px;
}
}

Related

ripple animation with radial gradient

I want to create infinite ripple animation inside a rectangle. The basic idea from my side is to start animating one circle to another. But the output is quite awkward.
Below is my code --
body {
background: #454a59;
}
.ripple {
width: 400px;
height: 80px;
margin-top: 40px;
position: relative;
background-color: red;
border-radius: 10px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
animation: blinds 3s linear infinite;
}
#keyframes blinds {
0% {
background-image: radial-gradient(circle, #ff8895 0 70px);
}
20% {
background-image: radial-gradient(circle, #ff8895 0 70px, rgba(255, 255, 255, 0.4) 70px 100px, transparent 100px 100%);
}
40% {
background-image: radial-gradient(circle, #ff8895 0 70px, rgba(255, 255, 255, 0.4) 70px 100px, rgba(255, 255, 255, 0.3) 100px 125px, transparent 125px 100%);
}
60% {
background-image: radial-gradient(circle, #ff8895 0 70px, rgba(255, 255, 255, 0.4) 70px 100px, rgba(255, 255, 255, 0.3) 100px 125px, rgba(255, 255, 255, 0.4) 125px 150px, transparent 150px 100%);
}
80% {
background-image: radial-gradient(circle, #ff8895 0 70px, rgba(255, 255, 255, 0.4) 70px 100px, rgba(255, 255, 255, 0.3) 100px 125px, rgba(255, 255, 255, 0.4) 125px 150px, rgba(255, 255, 255, 0.4) 150px 175px, transparent 175px 100%);
}
100% {
background-image: radial-gradient(circle, #ff8895 0 70px, rgba(255, 255, 255, 0.4) 70px 100px, rgba(255, 255, 255, 0.3) 100px 125px, rgba(255, 255, 255, 0.4) 125px 150px, rgba(255, 255, 255, 0.4) 150px 175px, rgba(255, 255, 255, 0.4) 175px 200px, transparent 200px 100%);
}
}
<div class="ripple">
</div>
Also the animation is not smooth and circle will become invisible in the end.
Any help would be appreciated.
Thanks in advance.

Use multiple gradient and animate their size. Below an example where you can adjust the values until you get the result you want.
body {
background: #454a59;
}
.ripple {
width: 400px;
height: 80px;
margin-top: 40px;
position: relative;
background-color: red;
border-radius: 10px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
animation: blinds 5s ease-in-out infinite;
background:
radial-gradient(#ff8895 70%,#0000 71%), /* 1 */
radial-gradient(rgba(255, 255, 255, 0.4) 70%,#0000 71%), /* 2 */
radial-gradient(rgba(255, 255, 255, 0.3) 70%,#0000 71%), /* 3 */
radial-gradient(rgba(255, 255, 255, 0.4) 70%,#0000 71%), /* 4 */
radial-gradient(rgba(255, 255, 255, 0.3) 70%,#0000 71%) /* 5 */
red;
background-position: center;
background-repeat: no-repeat;
}
#keyframes blinds {
0% {background-size: 0 0}
/* 1 , 2 , 3 , 4 , 5*/
20% {background-size: 70px 70px, 0 0 ,0 0 ,0 0 ,0 0}
40% {background-size: 70px 70px, 100px 100px,0 0 ,0 0 ,0 0}
60% {background-size: 70px 70px, 100px 100px,125px 125px,0 0 ,0 0}
80% {background-size: 70px 70px, 100px 100px,125px 125px,150px 150px,0 0}
100%{background-size: 70px 70px, 100px 100px,125px 125px,150px 150px,175px 175px}
}
<div class="ripple">
</div>

Animate on hover using javascript and css

I'm new to javascript. I have created a div with shining effect (original code https://patrickdesjardins.com/blog/css3-shining-animation-for-html-element). Animation is set on the background position of of background image that is created by linear gradient from transparent to white to transparent which makes it look like shiny. So, I added javascript onmouseover event on div which will set the animation to div element. It works but only once. It stops working when mouse passes over div second time. Why is that? What should I do to make it work repeatedly?
Here's the css code:
#-webkit-keyframes ShineAnimation{
from {
background-repeat:no-repeat;
background-image:-webkit-linear-gradient(
top left,
rgba(255, 255, 255, 0.8) 0%,
rgba(255, 255, 255, 0.5) 10%,
rgba(255, 255, 255, 0.5) 37%,
rgba(255, 255, 255, 0.0) 45%,
rgba(255, 255, 255, 0.0) 48%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0.8) 52%,
rgba(255, 255, 255, 0.0) 57%,
rgba(255, 255, 255, 0.0) 100%
);
background-position:-450px -450px;
background-size: 2000px 2000px;
}
to {
background-repeat:no-repeat;
background-position:450px 450px;
}
div
{
background-color:#990000;
padding:50px;
margin:10px;
}
Here's the html:
<div id="shine-me" onmousemove="myfunction()">
Here's the javascript:
function myfunction()
{
document.getElementById("shine-me").style.animationName = "ShineAnimation";
document.getElementById("shine-me").style.animationDuration = "4s";
}

You don't need javascript at all for that. Instead, just define the animation in the div's hover state:
div:hover {
animation-name:ShineAnimation;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Or, using the shorthand:
div:hover {
animation: 4s infinite alternate ShineAnimation;
}
I think your animation is not working quite right, but that's a separate issue. Also you were missing a closing bracket after the keyframes definition. That may have been just a bad copy-paste?
CSS animation documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
#-webkit-keyframes ShineAnimation{
from {
background-repeat:no-repeat;
background-image:-webkit-linear-gradient(
top left,
rgba(255, 255, 255, 0.8) 0%,
rgba(255, 255, 255, 0.5) 10%,
rgba(255, 255, 255, 0.5) 37%,
rgba(255, 255, 255, 0.0) 45%,
rgba(255, 255, 255, 0.0) 48%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0.8) 52%,
rgba(255, 255, 255, 0.0) 57%,
rgba(255, 255, 255, 0.0) 100%
);
background-position:-450px -450px;
background-size: 2000px 2000px;
}
to {
background-repeat:no-repeat;
background-position:450px 450px;
}
}
div {
background-color:#990000;
padding:50px;
margin:10px;
}
div:hover {
animation: 4s infinite alternate ShineAnimation;
}
<div id="shine-me">

If you want using javascript, you have to remove the animation also. In my example i choosed a class instead of style. On hover i add the animation class and on mouseout i remove it again.
const shineMe = document.getElementById('shine-me');
function addAnimation() {
shineMe.classList.add('animation')
}
function removeAnimation() {
shineMe.classList.remove('animation')
}
shineMe.addEventListener('mouseover', addAnimation);
shineMe.addEventListener('mouseout', removeAnimation);
#-webkit-keyframes ShineAnimation {
from {
background-repeat: no-repeat;
background-image: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 10%, rgba(255, 255, 255, 0.5) 37%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.8) 52%, rgba(255, 255, 255, 0) 57%, rgba(255, 255, 255, 0) 100%);
background-position: -450px -450px;
background-size: 2000px 2000px; }
to {
background-repeat: no-repeat;
background-position: 450px 450px; } }
div {
background-color: #990000;
padding: 50px;
margin: 10px; }
.animation {
-webkit-animation-name: ShineAnimation;
animation-name: ShineAnimation;
-webkit-animation-duration: 4s;
animation-duration: 4s; }
<div id="shine-me"></div>

shine animation with gradient background?

I'm trying to create a shine animation on an element that already has a gradient.
But my animation remove the gradient background...
This is what I have done:
body {
background: blue;
}
.mytoast {
-webkit-animation-name: ShineAnimation;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(.12, .89, .98, .47);
box-sizing: border-box;
/*background-color:rgba(0, 0, 0, 0.8);*/
background-image: linear-gradient(-225deg, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%);
border-radius: 100px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
clear: both;
color: #fff;
cursor: grab;
/* display: -webkit-flex;
display: -ms-flexbox;*/
/* display: flex;*/
display: inline-block;
font-size: 16px;
font-weight: 300;
height: auto;
line-height: 1.5;
margin-top: 8px;
max-width: 100%;
min-height: 48px;
padding: 16px 24px;
position: relative;
top: 0px;
width: 90%;
margin: 0;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
#-webkit-keyframes ShineAnimation {
from {
background-repeat: no-repeat;
background-image: -webkit-linear-gradient( top left, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.0) 45%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.5) 52%, rgba(255, 255, 255, 0.0) 57%, rgba(255, 255, 255, 0.0) 100%);
background-position: -250px -250px;
background-size: 600px 600px
}
to {
background-repeat: no-repeat;
background-position: 250px 250px;
}
}
<div class="mytoast">
</div>
If you run the code above, you will see the shine animation but the issue is that it will also animate the gradient and removes it which is not what I am trying to do.
could someone please advice on this?

You can set multiple backgrounds (including gradients) in CSS. Since you only animate the background position of the shiny gradient, you can move all definitions to .mytoast, and set the definitions for each of the backgrounds.
In the animations set the background position for both backgrounds. The one for the non animated background would be the identical to the definition in .mytoast.
Note: unless you're going to support really old browsers, you don't need the -webkit prefix.
body {
background: blue;
}
.mytoast {
background:
linear-gradient(
to top left,
rgba(255, 255, 255, 0.0) 0%,
rgba(255, 255, 255, 0.0) 45%,
rgba(255, 255, 255, 0.5) 48%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0.5) 52%,
rgba(255, 255, 255, 0.0) 57%,
rgba(255, 255, 255, 0.0) 100%
),
linear-gradient(-225deg, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%);
background-size: 600px 600px, 100% 100%;
background-position: -250px -250px, center;
background-repeat: no-repeat;
animation: ShineAnimation 5s infinite cubic-bezier(.12, .89, .98, .47);
box-sizing: border-box;
border-radius: 100px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
clear: both;
color: #fff;
cursor: grab;
display: inline-block;
font-size: 16px;
font-weight: 300;
height: auto;
line-height: 1.5;
margin-top: 8px;
max-width: 100%;
min-height: 48px;
padding: 16px 24px;
position: relative;
top: 0px;
width: 90%;
margin: 0;
}
#keyframes ShineAnimation {
to {
background-position: 250px 250px, center;
}
}
<div class="mytoast">
</div>

I prefer creating a block overlaying before .mytoast and animate the shining block from left to right.
Hope this helps.
body {
width: 100%;
background: blue;
}
.mytoast {
box-sizing: border-box;
background-image: linear-gradient(-225deg, #ff3cac 0%, #562b7c 52%, #2b86c5 100%);
border-radius: 100px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
clear: both;
color: #fff;
cursor: -webkit-grab;
cursor: grab;
display: block;
font-size: 16px;
font-weight: 300;
height: auto;
line-height: 1.5;
width: 100%;
height: 48px;
padding: 16px 24px;
position: relative;
top: 0px;
width: 90%;
margin: 8px 0 0;
overflow: hidden;
}
.mytoast:before {
width: 100%;
height: 48px;
content: "";
background-image: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.5) 52%, rgba(255, 255, 255, 0) 57%, rgba(255, 255, 255, 0) 100%);
-webkit-animation-name: ShineAnimation;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(0.12, 0.89, 0.98, 0.47);
display: block;
position: absolute;
top: 0;
left: -100%;
z-index: 2;
-webkit-transform: skew(-20deg);
transform: skew(-20deg);
}
#-webkit-keyframes ShineAnimation {
from {
left: -100%;
}
to {
left: 100%;
}
}
<div class="mytoast"></div>

Why does my animation not work in Firefox?

I have some code that works perfectly in Chrome but it doesn't work in Firefox
I want my logo image shine in my website. Code runs in Chrome but I don't know why it doesn't work in Firefox.
.shine-me {
width:100%; /*Make sure the animation is over the whole element*/
-webkit-animation-name: ShineAnimation;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(.12,.89,.98,.47);
animation:ShineAnimation 5s infinite;
animation-timing-function: cubic-bezier(.12,.89,.98,.47);
}
#-webkit-keyframes ShineAnimation{
from {
background-repeat:no-repeat;
background-image:-webkit-linear-gradient(
top left,
rgba(255, 255, 255, 0.0) 0%,
rgba(255, 255, 255, 0.0) 45%,
rgba(255, 255, 255, 0.5) 48%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0.5) 52%,
rgba(255, 255, 255, 0.0) 57%,
rgba(255, 255, 255, 0.0) 100%
);
background-position:-250px -250px;
background-size: 600px 600px
}
to {
background-repeat:no-repeat;
background-position:250px 250px;
}
}
#keyframes ShineAnimation{
from {
background-repeat:no-repeat;
background-image:linear-gradient(
top left,
rgba(255, 255, 255, 0.0) 0%,
rgba(255, 255, 255, 0.0) 45%,
rgba(255, 255, 255, 0.5) 48%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0.5) 52%,
rgba(255, 255, 255, 0.0) 57%,
rgba(255, 255, 255, 0.0) 100%
);
background-position:-250px -250px;
background-size: 600px 600px
}
to {
background-repeat:no-repeat;
background-position:250px 250px;
}
}
p
{
background-color:#c0c0c0;
padding:15px;
}

It doesn't work in Firefox because of two reasons:
You are using the old WebKit specific linear gradient syntax inside the #keyframes rule. The new syntax must have the to keyword before the sides (like to top left).
Firefox doesn't support declaring the background-image within #keyframes unlike browsers that use WebKit. The reason is described in my answer here. Move the background-image properties that are applied within the 0% frame to the base selector and animate just background-position.
.shine-me {
width: 100%; /*Make sure the animation is over the whole element*/
background-image: linear-gradient(to top left, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.0) 45%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.5) 52%, rgba(255, 255, 255, 0.0) 57%, rgba(255, 255, 255, 0.0) 100%);
background-position: -250px -250px;
background-size: 600px 600px;
background-repeat: no-repeat;
-webkit-animation: ShineAnimation 5s infinite cubic-bezier(.12, .89, .98, .47);
animation: ShineAnimation 5s infinite cubic-bezier(.12, .89, .98, .47);
}
#-webkit-keyframes ShineAnimation {
from {
background-position: -250px -250px;
}
to {
background-position: 500px 0px;
}
}
#keyframes ShineAnimation {
from {
background-position: -250px -250px;
}
to {
background-position: 500px 0px; /* increase the X position as required */
}
}
p {
background-color: #c0c0c0;
padding: 15px;
}
<p class='shine-me'>Some text</p>

You will also need to add following css :
-moz-animation:ShineAnimation 5s infinite;
-moz-animation-timing-function: cubic-bezier(.12,.89,.98,.47);
#-moz-keyframes ShineAnimation{
from {
background-repeat:no-repeat;
background-image:-webkit-linear-gradient(
top left,
rgba(255, 255, 255, 0.0) 0%,
rgba(255, 255, 255, 0.0) 45%,
rgba(255, 255, 255, 0.5) 48%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0.5) 52%,
rgba(255, 255, 255, 0.0) 57%,
rgba(255, 255, 255, 0.0) 100%
);
background-position:-250px -250px;
background-size: 600px 600px
}
to {
background-repeat:no-repeat;
background-position:250px 250px;
}
}

Opacity - changing from-to for background with CSS

I have the following element with background:
and I want to set to it opacity changing from 0 to 1 for example. Is it possible to make this only with CSS?
This is how I am making the background:
padding: 5px 10px 5px 10px;
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-size: 20px 20px;
background-color: #E5D52B;

Is this what you are trying to do? fiddle
<button class="button">
<span></span>
</button>
.button {
padding: 5px 10px 5px 10px;
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-size: 20px 20px;
background-color: #E5D52B;
width:400px;
height:100px;
}
span {
background: linear-gradient(to left, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 80%);
left:0;
top:8px;
width:400px;
height:100px;
position:absolute;
margin:0;
padding: 0;
}

You can use CSS3 transitions.
.button {
padding: 5px 10px 5px 10px;
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-size: 20px 20px;
background-color: #E5D52B;
opacity:1;
transition:opacity 1s;
-webkit-transition:opacity 1s;
}
.button:hover {
opacity:0;
transition:opacity 1s;
-webkit-transition:opacity 1s;
}
You can replace .button:hover with another definition for the same effect. See this fiddle.

here is how you do it:::
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

Resources