iframe {
box-shadow: 0 10px 18px 0 rgba(0, 0, 0, 0.144),
0 12px 30px 0 rgba(0, 0, 0, 0.377);
}
iframe:hover {
filter: brightness(95%);
transition: 0.5s ease-in-out;
animation: iframes 0.8s linear both 1;
box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.212),
0 16px 35px 0 rgba(0, 0, 0, 0.493);
}
#keyframes iframes {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(7deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-7deg);
}
100% {
transform: rotate(0deg) ;
}
}
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14023.546898520377!2d77.2038604!3d28.5130556!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd87ca9af3beebff5!2sShrishti%20Flower!5e0!3m2!1sen!2sin!4v1613667773659!5m2!1sen!2sin" width="60%" height="400" frameborder="0" style="border:2.7px blue solid; margin-bottom: 2rem; border-radius: 1rem; " allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
<!-- iframe --!>
when I hover on this iframe it starts to shaking rapidly and the animation trigger more than once. I don't know why this happens . pls help me to solve it.
The shaking rapidly part I do not experience with your code snippet, the repeated animation is caused by having the animation on hover, this will reset the count everytime a user hovers the iframe.
By setting the animation on the iframe itself you can prevent this. You set start the animation on hover with animation-play-state.
iframe {
box-shadow: 0 10px 18px 0 rgba(0, 0, 0, 0.144),
0 12px 30px 0 rgba(0, 0, 0, 0.377);
animation: iframes 0.8s linear both 1;
animation-play-state: paused;
}
iframe:hover {
filter: brightness(95%);
transition: 0.5s ease-in-out;
animation-play-state: running;
box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.212),
0 16px 35px 0 rgba(0, 0, 0, 0.493);
}
#keyframes iframes {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(7deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-7deg);
}
100% {
transform: rotate(0deg) ;
}
}
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14023.546898520377!2d77.2038604!3d28.5130556!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd87ca9af3beebff5!2sShrishti%20Flower!5e0!3m2!1sen!2sin!4v1613667773659!5m2!1sen!2sin" width="60%" height="400" frameborder="0" style="border:2.7px blue solid; margin-bottom: 2rem; border-radius: 1rem; " allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
Please add "animation-iteration-count" to "infinite" for the shaking rapidly.
iframe {
box-shadow: 0 10px 18px 0 rgba(0, 0, 0, 0.144),
0 12px 30px 0 rgba(0, 0, 0, 0.377);
}
iframe:hover {
filter: brightness(95%);
transition: 0.5s ease-in-out;
animation: iframes 0.8s linear both 1;
box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.212),
0 16px 35px 0 rgba(0, 0, 0, 0.493);
animation-iteration-count:infinite;
}
#keyframes iframes {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(7deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-7deg);
}
100% {
transform: rotate(0deg) ;
}
}
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14023.546898520377!2d77.2038604!3d28.5130556!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd87ca9af3beebff5!2sShrishti%20Flower!5e0!3m2!1sen!2sin!4v1613667773659!5m2!1sen!2sin" width="60%" height="400" frameborder="0" style="border:2.7px blue solid; margin-bottom: 2rem; border-radius: 1rem; " allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
Related
I have a breathing button and 2 left and right arrow having animation from left to right and right to left. I need to sync the animation speed of both the left and right arrow with the breathing button.When button will expand need to move both right and left arrow forward towards button and vice versa. Here is the code below
html
<div class="floatleft arrow arrow-right animate-right-to-left">Message2</div>
<button id="breathing-button" class="floatleft">Breathing Button</button>
<div class="floatleft arrow arrow-left animate-left-to-right">Message1</div>
css
#breathing-button {
width: 270px;
padding: 20px;
border: 1px solid #d1d1d1;
animation: breathing 1s ease-out infinite normal;
font-size: 24px;
background: #5885cb;
color: #fff;
-webkit-font-smoothing: antialiased;
border-radius: 8px;
text-align: center;
}
#keyframes breathing {
0% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
25% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
60% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
}
.arrow {
position: relative;
font-size: 13px;
max-width: 100px;
background: #D94F1A;
height: 40px;
line-height: 40px;
text-align: center;
color: white;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s ease-in-out;
top: 15px;
}
.arrow {
visibility: visible;
opacity: 1;
}
.arrow.animate-left-to-right {
animation-name: move-left-to-right;
animation-duration: 1s;
animation-delay: 0.6s;
animation-iteration-count: infinite;
animation-direction: alternative;
}
.arrow.animate-right-to-left {
animation-name: move-right-to-left;
animation-duration: 1s;
animation-delay: 0.6s;
animation-iteration-count: infinite;
animation-direction: alternative;
}
#keyframes move-left-to-right {
0% {
transform: translateX(5%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateX(15%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
}
100% {
transform: translateX(5%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
}
#keyframes move-right-to-left {
0% {
transform: translateX(-5%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateX(-15%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.4);
}
100% {
transform: translateX(-5%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
}
}
.arrow-right:after {
content: "";
position: absolute;
right: -20px;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #D94F1A;
}
/*left arrow*/
.arrow-left {
border-radius: 0 5px 5px 0;
}
.arrow-left:before {
content: "";
position: absolute;
left: -20px;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #D94F1A;
}
.floatleft{
float:left;
width:100px;
margin-left:10px;
margin-right:10px;
}
Changed breathing keyframes to this
#keyframes breathing {
0% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
50% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
}
Demo
Cleaned your code a little.
#breathing-button {
width: 270px;
padding: 20px;
border: 1px solid #d1d1d1;
animation: breathing 1s infinite forwards;
font-size: 24px;
background: #5885cb;
color: #fff;
-webkit-font-smoothing: antialiased;
border-radius: 8px;
text-align: center;
}
#keyframes breathing {
0% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
50% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
}
.arrow {
position: relative;
font-size: 13px;
max-width: 100px;
background: #D94F1A;
height: 40px;
line-height: 40px;
text-align: center;
color: white;
top: 15px;
}
.arrow.animate-left-to-right {
animation: move-left-to-right 1s infinite forwards;
}
.arrow.animate-right-to-left {
animation: move-right-to-left 1s infinite forwards;
}
#keyframes move-left-to-right {
0% {
transform: translateX(15%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
}
50% {
transform: translateX(5%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
100% {
transform: translateX(15%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
}
}
#keyframes move-right-to-left {
0% {
transform: translateX(-15%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.4);
}
50% {
transform: translateX(-5%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
}
100% {
transform: translateX(-15%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.4);
}
}
.arrow-right {
border-radius: 5px 0 0 5px;
}
.arrow-left {
border-radius: 0 5px 5px 0;
}
.arrow-right:after, .arrow-left:before {
content: "";
position: absolute;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.arrow-right:after {
right: -20px;
border-left: 20px solid #D94F1A;
}
.arrow-left:before {
left: -20px;
border-right: 20px solid #D94F1A;
}
.floatleft {
float: left;
width: 100px;
margin-left: 10px;
margin-right: 10px;
}
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 have a panel with components inside and once the submit button is pressed, an overlay appears, but is not covering the entire parent panel (see picture) when I have scrolled all the way to the bottom. Also, the spinner need to be always in the center whether I am scrolling or not. I used position: fixed; but I don't know if that's the best practice.
CSS
.pay-storage-container {
$inner-padding: 16px;
height: 100vh;
position: fixed;
right: 0;
top: 0;
width: 325px;
z-index: 2;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
background-color: #fff;
.loading-container {
position: absolute;
background-color: rgba(0, 0, 0, 0.2);
width: 100%;
height: 100%;
top: 0;
left: 0;
img {
position: fixed;
top: 50%;
right: 18%;
animation: spinner 1s linear infinite;
}
}
}
HTML
<div class="pay-storage-container {{toggleSideBar ? 'showSideBar' : 'closeSideBar'}}">
<div class="header-container">
<div class="header">Pay Storage</div>
<span class='close-icon csx-common_delete' (click)="onToggleSideBar(false)"></span>
</div>
<div class="pay-storage-inner">
<app-equipment-summary [equipmentSummary]='equipmentSummary'></app-equipment-summary>
<app-credit-card #creditCardForm></app-credit-card>
<div class="loading-container" *ngIf="isLoading">
<img src="assets/spinner.svg" alt="">
</div>
</div>
<div class="footer-container">
<!-- <button pButton type="button" label="Submit Payment" class="x-primary-green-400" [disabled]='!creditCardForm.creditCardForm.valid || isLoading'
(click)="onSubmitPayment()"></button> -->
<button pButton type="button" label="Submit Payment" class="x-primary-green-400" [disabled]='isLoading' (click)="onSubmitPayment()"></button>
</div>
<div *ngIf="paymentMessage$ | async as message" class="pay-storage-inner pay-storage-success">
<app-payment-success [paymentSuccess]="paymentSuccess" (close)="onToggleSideBar($event)"></app-payment-success>
</div>
</div>
I don't think that there is anything wrong with using position:fixed to keep your spinner in the center of the page.
Also, if you want to fully overlay your content then your loading-container needs to be at the very bottom of the content you want overlayed. This code below should just overlay pay-storage-container:
<div class="pay-storage-container {{toggleSideBar ? 'showSideBar' : 'closeSideBar'}}">
<div class="header-container">
<div class="header">Pay Storage</div>
<span class='close-icon csx-common_delete' (click)="onToggleSideBar(false)"></span>
</div>
<div class="pay-storage-inner">
<app-equipment-summary [equipmentSummary]='equipmentSummary'></app-equipment-summary>
<app-credit-card #creditCardForm></app-credit-card>
</div>
<div class="footer-container">
<!-- <button pButton type="button" label="Submit Payment" class="x-primary-green-400" [disabled]='!creditCardForm.creditCardForm.valid || isLoading'
(click)="onSubmitPayment()"></button> -->
<button pButton type="button" label="Submit Payment" class="x-primary-green-400" [disabled]='isLoading' (click)="onSubmitPayment()"></button>
</div>
<div *ngIf="paymentMessage$ | async as message" class="pay-storage-inner pay-storage-success">
<app-payment-success [paymentSuccess]="paymentSuccess" (close)="onToggleSideBar($event)"></app-payment-success>
</div>
<div class="loading-container" *ngIf="isLoading">
<img src="assets/spinner.svg" alt="">
</div>
</div>
I am sharing a sample code snippet which centers overlay spinner for all dimensions. You can edit your CSS accordingly to achieve centered spinner with overlay.
/* Absolute Center Spinner */
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
/* hide "loading..." text */
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.loading:not(:required):after {
content: '';
display: block;
font-size: 10px;
width: 1em;
height: 1em;
margin-top: -0.5em;
-webkit-animation: spinner 1500ms infinite linear;
-moz-animation: spinner 1500ms infinite linear;
-ms-animation: spinner 1500ms infinite linear;
-o-animation: spinner 1500ms infinite linear;
animation: spinner 1500ms infinite linear;
border-radius: 0.5em;
-webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}
/* Animation */
#-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-o-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div class="loading">Loading…</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>
How can someone achieve the effect shown here using pure css3.
Using this (pure CSS/without javascript):
Animated progress circle in CSS
Using the :target selector
I create an example, Probably still not what you are looking for, but it was the closest I came.
Example (Demo in jsfiddle):
<style>
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes rotate {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#startupload:target {
/*"disable" button*/
background: transparent;
border: none;
}
#startupload:target div.before {
/*Hide If has hash in url address browser*/
display: none;
}
#startupload div.progress-circle-container {
position: relative;
height: 230px;
width: 230px;
margin: 0 auto;
display: none; /*hide If no Hash in address*/
}
#startupload:target div.progress-circle-container {
display: block; /*Show If Hash in address*/
}
#startupload div.progress-circle-container div.progress-circle-outer {
background-color: #faef85;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(0deg, #d66f0f, #faef85);
background-image: -webkit-linear-gradient(0deg, #d66f0f, #faef85);
background-image: -o-linear-gradient(0deg, #d66f0f, #faef85);
background-image: linear-gradient(0deg, #d66f0f, #faef85);
width: 230px;
height: 230px;
position: absolute;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation: rotate 2.2s infinite linear;
-moz-animation: rotate 2.2s infinite linear;
-o-animation: rotate 2.2s infinite linear;
animation: rotate 2.2s infinite linear;
-webkit-box-shadow: inset 0 2px 10px #d58513,inset 0 0 20px #b93d00,0 0 15px rgba(216, 140, 23, 0.25);
-moz-box-shadow: inset 0 2px 10px #d58513,inset 0 0 20px #b93d00,0 0 15px rgba(216, 140, 23, 0.25);
box-shadow: inset 0 2px 10px #d58513,inset 0 0 20px #b93d00,0 0 15px rgba(216, 140, 23, 0.25);
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
}
#startupload:target div.progress-circle-container div.progress-circle-outer.animate {
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
}
#startupload div.progress-circle-container div.progress-circle-inner {
height: 170px;
width: 170px;
margin: 0 auto;
position: absolute;
left: 30px;
top: 30px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
background-color: #fff;/*change color background*/
-webkit-box-shadow: inset 0 2px 1px #ffffff,inset 0 -1px 1px rgba(0, 0, 0, 0.08),inset 0 -3px 1px rgba(0, 0, 0, 0.09),0 2px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 2px 1px #ffffff,inset 0 -1px 1px rgba(0, 0, 0, 0.08),inset 0 -3px 1px rgba(0, 0, 0, 0.09),0 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 2px 1px #ffffff,inset 0 -1px 1px rgba(0, 0, 0, 0.08),inset 0 -3px 1px rgba(0, 0, 0, 0.09),0 2px 2px rgba(0, 0, 0, 0.3);
text-align: center;
}
</style>
<form action="#startupload">
<button id="startupload" type="submit">
<div class="before">
Start upload
</div>
<div class="progress-circle-container">
<div class="progress-circle-outer animate">
</div>
<div class="progress-circle-inner"></div>
</div>
</button>
</form>
Perhaps the ultimate goal to achieve the best is something like:
css3 animations frame by frame