I have this code which allows the object to motion blur side to side however I want it to motion blue vertically so it goes from up to down and then back to up. Could you please help me out?
http://jsfiddle.net/db8gr4y6/
#outer {
position: relative;
margin: 10px;
}
#mb {
position: absolute;
left: 0;
font-size: 2em;
font-weight: bold;
padding: 0.2em 1em;
color: #fff;
background-color: #600;
border: 0.2em solid #c00;
border-radius: 8px;
text-shadow: 0 0 5px rgba(255, 255, 255, 0);
box-shadow: 0 0 2px rgba(200, 0, 0, 0);
-webkit-animation: motionblur 4s ease-in-out infinite;
animation: motionblur 4s ease-in-out infinite;
}
#-webkit-keyframes motionblur {
0% {
left: 0;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
}
5% {
left: 0;
-webkit-transform-origin: 0 0;
-webkit-transform: scaleX(0.85);
}
25% {
text-shadow: -5px 0 5px rgba(255, 255, 255, 1);
box-shadow: -15px 0 10px -5px rgba(200, 0, 0, 0.5);
-webkit-transform: scaleX(1.1) skewX(-4deg);
}
50% {
left: 300px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
-webkit-transform: scaleX(1) skewX(0deg);
}
55% {
left: 300px;
-webkit-transform-origin: 100% 0;
-webkit-transform: scaleX(0.85);
}
75% {
text-shadow: 5px 0 5px rgba(255, 255, 255, 1);
box-shadow: 15px 0 10px -5px rgba(200, 0, 0, 0.5);
-webkit-transform: scaleX(1.1) skewX(4deg);
}
100% {
left: 0px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
-webkit-transform: scaleX(1) skewX(0deg);
}
}
#keyframes motionblur {
0% {
left: 0;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
}
5% {
left: 0;
transform-origin: 0 0;
transform: scaleX(0.85);
}
25% {
text-shadow: -5px 0 5px rgba(255, 255, 255, 1);
box-shadow: -15px 0 10px -5px rgba(200, 0, 0, 0.5);
transform: scaleX(1.1) skewX(-4deg);
}
50% {
left: 300px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
transform: scaleX(1) skewX(0deg);
}
55% {
left: 300px;
transform-origin: 100% 0;
transform: scaleX(0.85);
}
75% {
text-shadow: 5px 0 5px rgba(255, 255, 255, 1);
box-shadow: 15px 0 10px -5px rgba(200, 0, 0, 0.5);
transform: scaleX(1.1) skewX(4deg);
}
100% {
left: 0px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
transform: scaleX(1) skewX(0deg);
}
<div id="outer">
<div id="mb">Motion Blur</div>
</div>
Try this to reverse animation.
Just replace all left attributes into Top
And all transform property of X, ScaleX and SkewX to SkewX SkewY
#outer {
position: relative;
margin: 10px;
}
#mb {
position: absolute;
left: 0;
font-size: 2em;
font-weight: bold;
padding: 0.2em 1em;
color: #fff;
background-color: #600;
border: 0.2em solid #c00;
border-radius: 8px;
text-shadow: 0 0 5px rgba(255, 255, 255, 0);
box-shadow: 0 0 2px rgba(200, 0, 0, 0);
-webkit-animation: motionblur 4s ease-in-out infinite;
animation: motionblur 4s ease-in-out infinite;
}
#-webkit-keyframes motionblur {
0% {
top: 0;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
}
5% {
top: 0;
-webkit-transform-origin: 0 0;
-webkit-transform: scaleY(0.85);
}
25% {
text-shadow: -5px 0 5px rgba(255, 255, 255, 1);
box-shadow: -15px 0 10px -5px rgba(200, 0, 0, 0.5);
-webkit-transform: scaleY(1.1) skewY(-4deg);
}
50% {
top: 300px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
-webkit-transform: scaleY(1) skewY(0deg);
}
55% {
left: 300px;
-webkit-transform-origin: 100% 0;
-webkit-transform: scaleY(0.85);
}
75% {
text-shadow: 5px 0 5px rgba(255, 255, 255, 1);
box-shadow: 15px 0 10px -5px rgba(200, 0, 0, 0.5);
-webkit-transform: scaleY(1.1) skewY(4deg);
}
100% {
top: 0px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
-webkit-transform: scaleY(1) skewY(0deg);
}
}
#keyframes motionblur {
0% {
top: 0;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
}
5% {
top: 0;
-webkit-transform-origin: 0 0;
-webkit-transform: scaleY(0.85);
}
25% {
text-shadow: -5px 0 5px rgba(255, 255, 255, 1);
box-shadow: -15px 0 10px -5px rgba(200, 0, 0, 0.5);
-webkit-transform: scaleY(1.1) skewY(-4deg);
}
50% {
top: 300px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
-webkit-transform: scaleY(1) skewY(0deg);
}
55% {
top: 300px;
-webkit-transform-origin: 100% 0;
-webkit-transform: scaleY(0.85);
}
75% {
text-shadow: 5px 0 5px rgba(255, 255, 255, 1);
box-shadow: 15px 0 10px -5px rgba(200, 0, 0, 0.5);
-webkit-transform: scaleY(1.1) skewY(4deg);
}
100% {
top: 0px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
-webkit-transform: scaleY(1) skewY(0deg);
}
<div id="outer">
<div id="mb">Motion Blur</div>
</div>
Related
I'm studying HTML/CSS and I found a very interesting example of rotating box shadows. I thought I'd try to use it, but I can't get my head around rotating the shadows around my text.
The example I found has a like <div class="rotate-shadows"></div> and CSS like this:
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.rotate-shadows {
width: 220px;
height: 220px;
position: relative;
}
.rotate-shadows:after,
.rotate-shadows:before {
content: "";
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center center;
}
.rotate-shadows:before {
box-shadow: inset 0 20px 0 rgba(0, 250, 250, 0.6), inset 20px 0 0 rgba(0, 200, 200, 0.6), inset 0 -20px 0 rgba(0, 150, 200, 0.6), inset -20px 0 0 rgba(0, 200, 250, 0.6);
animation: rotate-before 2s -0.5s linear infinite;
}
.rotate-shadows:after {
box-shadow: inset 0 20px 0 rgba(250, 250, 0, 0.6), inset 20px 0 0 rgba(250, 200, 0, 0.6), inset 0 -20px 0 rgba(250, 150, 0, 0.6), inset -20px 0 0 rgba(250, 100, 0, 0.6);
animation: rotate-after 2s -0.5s linear infinite;
}
#keyframes rotate-after {
0% {transform: rotateZ(0deg) scaleX(1) scaleY(1);}
50% {transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);}
100% {transform: rotateZ(360deg) scaleX(1) scaleY(1);}
}
#keyframes rotate-before {
0% {transform: rotateZ(0deg) scaleX(1) scaleY(1);}
50% {transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);}
100% {transform: rotateZ(-360deg) scaleX(1) scaleY(1);}
}
<div class="rotate-shadows"></div>
I figured out that I don't need body {}, figured out where I can change the color of the shadows, scale, etc. But I can't get which part is responsible for the shape of the shadows.
Can I make the shadows go around my text like an animated frame:
Классная шляпная шляпа с широкими полями всего за два куська. Да-да!
Это не опечатка! Всего два динозаврических укуса и шляпа ваша!
Where do I need to put my text to have shadows rotating around it?
And how can I change the shape of shadows?
I just want to understand.
If I understood your requirement correctly is this what you need?
I added an extra div inside to wrap the text if that is not an issue? this div acts based on the parent's position. making it in the middle.
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
}
.rotate-shadows {
width: 220px;
height: 220px;
position: relative;
}
#text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
justify-content: center;
align-items: center;
}
.rotate-shadows:after,
.rotate-shadows:before {
content: "";
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center center;
}
.rotate-shadows:before {
box-shadow: inset 0 20px 0 rgba(0, 250, 250, 0.6), inset 20px 0 0 rgba(0, 200, 200, 0.6), inset 0 -20px 0 rgba(0, 150, 200, 0.6), inset -20px 0 0 rgba(0, 200, 250, 0.6);
animation: rotate-before 2s -0.5s linear infinite;
}
.rotate-shadows:after {
box-shadow: inset 0 20px 0 rgba(250, 250, 0, 0.6), inset 20px 0 0 rgba(250, 200, 0, 0.6), inset 0 -20px 0 rgba(250, 150, 0, 0.6), inset -20px 0 0 rgba(250, 100, 0, 0.6);
animation: rotate-after 2s -0.5s linear infinite;
}
#keyframes rotate-after {
0% {
transform: rotateZ(0deg) scaleX(1) scaleY(1);
}
50% {
transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
}
100% {
transform: rotateZ(360deg) scaleX(1) scaleY(1);
}
}
#keyframes rotate-before {
0% {
transform: rotateZ(0deg) scaleX(1) scaleY(1);
}
50% {
transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
}
100% {
transform: rotateZ(-360deg) scaleX(1) scaleY(1);
}
}
<div class="rotate-shadows">
<div id="text">
Once upon a time in Stackoverflow!!
</div>
</div>
If you need the content in the single Div then:
body {
height: 100vh;
}
.rotate-shadows {
width: 220px;
height: 220px;
position: absolute;
transform: translate(-50%, -50%);
justify-content: center;
align-items: center;
display: flex;
text-align: center;
vertical-align: middle;
top: 50%;
left: 50%;
}
.rotate-shadows:after,
.rotate-shadows:before {
content: "";
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center center;
}
.rotate-shadows:before {
box-shadow: inset 0 20px 0 rgba(0, 250, 250, 0.6), inset 20px 0 0 rgba(0, 200, 200, 0.6), inset 0 -20px 0 rgba(0, 150, 200, 0.6), inset -20px 0 0 rgba(0, 200, 250, 0.6);
animation: rotate-before 2s -0.5s linear infinite;
}
.rotate-shadows:after {
box-shadow: inset 0 20px 0 rgba(250, 250, 0, 0.6), inset 20px 0 0 rgba(250, 200, 0, 0.6), inset 0 -20px 0 rgba(250, 150, 0, 0.6), inset -20px 0 0 rgba(250, 100, 0, 0.6);
animation: rotate-after 2s -0.5s linear infinite;
}
#keyframes rotate-after {
0% {
transform: rotateZ(0deg) scaleX(1) scaleY(1);
}
50% {
transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
}
100% {
transform: rotateZ(360deg) scaleX(1) scaleY(1);
}
}
#keyframes rotate-before {
0% {
transform: rotateZ(0deg) scaleX(1) scaleY(1);
}
50% {
transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
}
100% {
transform: rotateZ(-360deg) scaleX(1) scaleY(1);
}
}
<div class="rotate-shadows"> Once upon a time in Stackoverflow!!
</div>
I'm trying to create a sun with a pulsing animation. However, I'm having trouble with the intervals of the pulse. Two pulses should always be moving with the transition. Also the sun shouldn't be standing without a pulse.
.pulse {
margin: 100px;
display: block;
width: 85px;
height: 85px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse 2s infinite;
position: relative;
}
.pulse::before {
content: '';
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse2 2.5s infinite;
border-radius: 50%;
width: 85px;
height: 85px;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.pulse:hover {
animation: none;
}
#-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
}
}
#keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
box-shadow: 0 0 0 40px rgba(204, 169, 44, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
}
}
#-webkit-keyframes pulse2 {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
}
}
#keyframes pulse2 {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
box-shadow: 0 0 0 60px rgba(204, 169, 44, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
}
}
<div class="nb-infosys-sun">
<span class="pulse"></span>
</div>
This is what I got after adding animation-delay:
.pulse::before {
content: '';
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse2 1s infinite;
animation-delay: 0.5s;
border-radius: 50%;
width: 85px;
height: 85px;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
Here is the JSFiddle demo
You can add some animation delay to adjust timing of both pulse as below snippet
.pulse {
margin: 100px;
display: block;
width: 85px;
height: 85px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse 2s linear infinite both;
position: relative;
}
.pulse::before {
content: '';
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse2 2s linear 1s infinite both;
border-radius: 50%;
width: 85px;
height: 85px;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.pulse:hover {
animation: none;
}
#-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
}
}
#keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
box-shadow: 0 0 0 40px rgba(204, 169, 44, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
}
}
#-webkit-keyframes pulse2 {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
}
}
#keyframes pulse2 {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
box-shadow: 0 0 0 60px rgba(204, 169, 44, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
}
}
<div class="nb-infosys-sun">
<span class="pulse"></span>
</div>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pulse Animation CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="center">
<div class="pulse">code_snail</div>
</div>
</body>
</html>
style.css
body {
margin: 0;
padding: 0;
background: #262626;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.pulse {
width: 150px;
height: 150px;
background: rgb(255, 0, 64);
border-radius: 50%;
color: #fff;
font-size: 20px;
text-align: center;
line-height: 150px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
animation: animate 2s linear infinite;
}
#keyframes animate {
0% {
box-shadow: 0 0 0 0 rgba(255, 0, 64, 0.7), 0 0 0 0 rgba(255, 0, 64, 0.7);
}
40% {
box-shadow: 0 0 0 50px rgba(255, 0, 64, 0), 0 0 0 0 rgba(255, 0, 64, 0.7);
}
80% {
box-shadow: 0 0 0 50px rgba(255, 0, 64, 0), 0 0 0 30px rgba(255, 0, 64, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 0, 64, 0), 0 0 0 30px rgba(255, 0, 64, 0);
}
}
Output
codesnail.com
I need to change the animation with a transition effect. That is change first transition to another with a flow. When I tried for the same the animation changes with a fast change as in below snippet. Is there any way to animate the change in animation. I have tried the below code.
body{
background: url('https://i.pinimg.com/originals/0b/76/08/0b760848c89b9e4abd03f74f19419498.jpg');
}
.bubble{
top: 50px;
left: 80px;
height: 100px;
width: 100px;
color: #000;
box-sizing: border-box;
border-radius: 50%;
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.4);
transform: translatey(0px);
cursor: pointer;
position: absolute;
border: 10px solid rgba(255,255,255,0.2);
animation: float 4s ease-in-out infinite;
}
.bubble span {
font-size: 12px;
line-height: 85px;
position: absolute;
bottom: 0;
top: 0;
right: 0;
left: 0;
text-align: center;
border-radius: 50%;
background: red;
}
.bubble:before {
position: absolute;
content: "";
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
border-radius: 50%;
box-shadow: 0 0 rgba(255, 255, 255, 0.1), 0 0 0 8px rgba(255, 255, 255, 0.1),
0 0 0 16px rgba(255, 255, 255, 0.1), 0 0 0 24px rgba(255, 255, 255, 0.1);
z-index: -1;
animation: ripples 1s linear infinite;
animation-play-state: paused;
opacity: 0;
visibility: hidden;
transition: 0.5s;
transform: scale(0.5);
}
.bubble:hover {
transition: all 2s;
animation: tofixed 4s forwards;
box-shadow: none;
border-color: transparent;
}
.bubble:hover:before {
animation-play-state: running;
opacity: 1;
visibility: visible;
transform: scale(1);
}
#keyframes float {
0% { box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); transform: translatey(0px) scale(0.9); }
50% { box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2); transform: translatey(-20px) scale(1); }
100% { box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); transform: translatey(0px) scale(0.9); }
}
#keyframes tofixed {
to { transform: translatey(0px) scale(0.9); }
}
#keyframes ripples {
to {
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.1), 0 0 0 16px rgba(255, 255, 255, 0.1),
0 0 0 24px rgba(255, 255, 255, 0.1), 0 0 0 32px rgba(255, 255, 255, 0);
}
}
<div class="bubble">
<span class="bgviolet">ODOSTORE</span>
</div>
In the above snippet you can see the change in animation is instantly when I hover on it.
I need to animate the circle's box-shadow and scale it down to 1 from 1.6x during the same transition period of box-shadow.
The issue I'm facing is the animation of scale is happening after the animation of box-shadow is done.
body {
background-color: #333;
}
.ripple {
width: 20px;
margin: 50px auto;
height: 20px;
background: #ccc;
border-radius: 50%;
animation: rippleeff 2s ease infinite;
}
#keyframes rippleeff {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
transform: scale(1.4);
}
70% {
-moz-box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
transform: scale(1.6);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
transform: scale(1);
}
}
<div class="ripple">
</div>
Fiddle
When your transform: scale(1.6), your box-shadow become transparent and after that when you going to scale(1) your box-shadow is animating but you can't see it because it's transparent...so change box-shadow color
Also changed scale value in the code...
body {
background-color: #333;
}
.ripple {
width: 20px;
margin: 50px auto;
height: 20px;
background: #ccc;
border-radius: 50%;
animation: rippleeff 2s linear infinite;
}
#keyframes rippleeff {
0% {
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
transform: scale(1);
}
50% {
box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
transform: scale(1.6);
}
100% {
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
transform: scale(1);
}
}
<div class="ripple">
</div>
I am making a website and there is an effect which I have putted on a circle. The circle automaticlly opens on mouse hover and then it get close when the mouse get away. I just want to make it automatic . mens it should open and close automaticlly. Here is my css code for the circle .
HTML
<div class="circle">
<h1>TRANCE-2014</h1>
</div>
CSS
.circle {
background: rgb(255, 255, 255);
border-radius: 100%;
cursor: pointer;
position: relative;
margin: 0 auto;
width: 15em;
height: 15em;
overflow: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.circle h1 {
color: rgba(189, 185, 199, 0);
font-family:'Lato', sans-serif;
font-weight: 900;
font-size: 1.6em;
line-height: 8.2em;
text-align: center;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: color 0.8s ease-in-out;
-moz-transition: color 0.8s ease-in-out;
-ms-transition: color 0.8s ease-in-out;
transition: color 0.8s ease-in-out;
}
.circle:before, .circle:after {
border-radius: 100%;
content:"";
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 10.6em 0 rgba(30, 140, 209, 0.2), inset -10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 -10.6em 0 rgba(30, 140, 209, 0.2);
-webkit-transition: box-shadow 0.75s;
-moz-transition: box-shadow 0.75s;
-ms-transition: box-shadow 0.75s;
transition: box-shadow 0.75s;
}
.circle:after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.circle:hover:before, .circle:hover:after {
box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.86em 0 rgba(252, 150, 0, 0.5), inset -0.86em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);
}
.circle:hover > h1 {
color: rgba(185, 185, 185, 1);
}
I guess you mean something like this demo ?
If so you have to use the #keyframes element of CSS. More info on MDN or on CSS-Tricks.
CSS
.circle {
background: rgb(255, 255, 255);
border-radius: 100%;
cursor: pointer;
position: relative;
margin: 0 auto;
width: 15em;
height: 15em;
overflow: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.circle h1 {
font-family:'Lato', sans-serif;
font-weight: 900;
font-size: 1.6em;
line-height: 8.2em;
text-align: center;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-animation: showText 2s infinite; /* Safari/Chrome 4+ */
-moz-animation: showText 2s infinite; /* Firefox 5+ */
-o-animation: showText 2s infinite; /* Opera 12+ */
animation: showText 2s infinite; /* IE 10+ */
animation-timing-function: ease-in-out;
/*
** -webkit-transition: color 0.8s ease-in-out;
** -moz-transition: color 0.8s ease-in-out;
** -ms-transition: color 0.8s ease-in-out;
** transition: color 0.8s ease-in-out;
*/
}
.circle:before, .circle:after {
border-radius: 100%;
content:"";
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
-webkit-animation: moveCircle 2s infinite; /* Safari/Chrome 4+ */
-moz-animation: moveCircle 2s infinite; /* Firefox 5+ */
-o-animation: moveCircle 2s infinite; /* Opera 12+ */
animation: moveCircle 2s infinite; /* IE 10+ */
/*
** -webkit-transition: box-shadow 0.75s;
** -moz-transition: box-shadow 0.75s;
** -ms-transition: box-shadow 0.75s;
** transition: box-shadow 0.75s;
*/
}
.circle:after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#-webkit-keyframes moveCircle {
0% {
box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 10.6em 0 rgba(30, 140, 209, 0.2), inset -10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 -10.6em 0 rgba(30, 140, 209, 0.2);
}
100% {
box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.86em 0 rgba(252, 150, 0, 0.5), inset -0.86em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);
}
}
#-moz-keyframes moveCircle {
0% {
box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 10.6em 0 rgba(30, 140, 209, 0.2), inset -10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 -10.6em 0 rgba(30, 140, 209, 0.2);
}
100% {
box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.86em 0 rgba(252, 150, 0, 0.5), inset -0.86em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);
}
}
#-o-keyframes moveCircle {
0% {
box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 10.6em 0 rgba(30, 140, 209, 0.2), inset -10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 -10.6em 0 rgba(30, 140, 209, 0.2);
}
100% {
box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.86em 0 rgba(252, 150, 0, 0.5), inset -0.86em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);
}
}
#keyframes moveCircle {
0% {
box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 10.6em 0 rgba(30, 140, 209, 0.2), inset -10.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 -10.6em 0 rgba(30, 140, 209, 0.2);
}
100% {
box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.86em 0 rgba(252, 150, 0, 0.5), inset -0.86em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);
}
}
#-webkit-keyframes showText {
0% {
color: rgba(189, 185, 199, 0);
}
100% {
color: rgba(185, 185, 185, 1);
}
}
#-moz-keyframes showText {
0% {
color: rgba(189, 185, 199, 0);
}
100% {
color: rgba(185, 185, 185, 1);
}
}
#-o-keyframes showText {
0% {
color: rgba(189, 185, 199, 0);
}
100% {
color: rgba(185, 185, 185, 1);
}
}
#keyframes showText {
0% {
color: rgba(189, 185, 199, 0);
}
100% {
color: rgba(185, 185, 185, 1);
}
}