Related
I have a button that has 2 animations: a one-time fadeInBottom (on page load) and an infinite pulsing box-shadow. On hover, I want to pause the pulse and make the box-shadow stronger.
On first glance, I thought this would be easy. On the :hover pseudo-class, set animation-play-state: paused and then set a new box-shadow. That doesn't work, I guess because CSS doesn't let you directly change properties that are also being adjusted in animations.
.button {
animation: fadeInBottom 1s, fadeInOutShadow ease-in-out 1.2s alternate infinite;
&:hover {
animation-play-state: paused;
box-shadow: 0 0 35px rgba(255, 215, 0, 0.9);
}
}
#keyframes fadeInBottom {
0% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes fadeInOutShadow {
0% {
-webkit-box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
}
100% {
-webkit-box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
}
}
Ok, try #2. I checked a few questions on here and found one idea - use :hover {animation:0} to kill the animation, then set box-shadow.
Stop animation and start transition on hover
It's almost OK, but this doesn't work because of my fadeInBottom animation: every time I mouse leave the button, the fadeInBottom animation runs again.
.button {
animation: fadeInBottom 1s, fadeInOutShadow ease-in-out 1.2s alternate infinite;
&:hover {
animation: 0;
box-shadow: 0 0 35px rgba(255, 215, 0, 0.9);
}
}
I have three potential options (I think) to continue:
Remove the fadeInBottom animation on mouse leave (likely with jQuery.)
Only run the fadeInBottom animation once, on page load, and ignore :hover and mouse leave events. Is there a CSS way? jQuery? (Don't know if this is possible.)
Is there actually a simple property attribute I don't know about that can accomplish 1 or 2?
Any recommendations on which of these would be best? First-time question asker here. Thanks!
ok as long as you didn't replied yet, here is your solution, i hope it meets your code aims, regards,
$(document).ready(function(){
$(".button").css("animation", "fadeInBottom 1s");
setTimeout(function(){
$(".button").css("animation", "fadeInOutShadow ease-in-out 1.2s alternate infinite");
}, 1200);
});
$(".button").hover(function(){
$(".button").css({"animation": "0", "box-shadow": "0 0 35px rgba(250, 215, 0, 0.9)"});
}, function(){
$(".button").css({"box-shadow": "", "animation": "fadeInOutShadow ease-in-out 1.2s alternate infinite"});
});
.button {
&:hover {
box-shadow: 0 0 35px rgba(255, 215, 0, 0.9);
}
}
#keyframes fadeInBottom {
0% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes fadeInOutShadow {
0% {
-webkit-box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
}
100% {
-webkit-box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button">Button</button>
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 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>
What I have here is a profile button that animates in, and performs a different animation on hover. However the entrance animation repeats when my mouse leaves the element. Is there a way to make sure that an animation is only triggered once per page load?
.profile {
width: 125px;
height: 125px;
background-image: url(graphics/profile1.jpg);
border-style: solid;
border-color: white;
border-radius: 50%;
margin-left: 80px;
outline: 1px solid transparent;
float: left;
animation: popIn 1s;
}
.profile:hover{
width: 125px;
height: 125px;
border-style: solid;
border-color: red;
box-shadow: 0 0 0 0 rgba(155, 0, 2, 0.6);
border-radius: 50%;
-webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
-moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
-ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
#keyframes popIn{
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
#-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
#-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
#keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
Here is a link to a similar question that might help you out.
Run CSS3 animation only once (at page loading)
Personally I would add an extra class to the div that handles all the entrance animations and then use javascript to remove that class once the cursor moves inside the div. I'll make a js fiddle and show you an example, just give me a few minutes.
Edit for fiddle link: https://jsfiddle.net/0uaktv10/
html:
<div class="profile load-in" style="background: blue; width: 100px; height: 100px;"></div>
Css:
enter .profile {
width: 125px;
height: 125px;
background-image: url(graphics/profile1.jpg);
border-style: solid;
border-color: white;
border-radius: 50%;
margin-left: 80px;
outline: 1px solid transparent;
float: left;
}
.load-in {
animation: popIn 1s;
}
.profile:hover{
width: 125px;
height: 125px;
border-style: solid;
border-color: red;
box-shadow: 0 0 0 0 rgba(155, 0, 2, 0.6);
border-radius: 50%;
-webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
-moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
-ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
#keyframes popIn{
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
#-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
#-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
#keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
jQuery:
$(".profile").hover(function(){
$(".profile").removeClass("load-in")
})
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);
}
}