I've added loading animation to the bootstrap button, and it is not showing correctly.
I've added a div to the button with the class "loader". But the loading animation is showing under the button.
How can I fix it with responsive design
Here is codepen: https://codepen.io/ayxano/pen/oNNxgQx
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
width: 2.5em;
height: 2.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 1.8s infinite ease-in-out;
animation: load7 1.8s infinite ease-in-out;
}
.loader {
color: #ffffff;
font-size: 10px;
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
content: '';
position: absolute;
top: 0;
}
.loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 3.5em;
}
#-webkit-keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
#keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
The issue is with the box-shadow. You are using a y-offset of 2.5em.
Try below CSS in this particular case:
.center-block.loader {
top: -2.5em;
}
Related
I am attempting to create a keyframe to make a picture of a bell appear as if it is ringing. As of now, the keyframe is not running or at least appears not to be running.
Does anyone see what I am doing wrong?
#subscribeButton {
width: 50%;
height: 150px;
background: #1b8c00;
background: #5fae4c;
border: 2px solid #FFF;
position: fixed;
left: 0;
bottom: 0;
cursor: pointer;
}
#subscribeButton img {
width: 70px;
height: auto;
display: block;
margin: 10px auto;
text-align: center;
-webkit-animation-name: shake;
animation-name: shake;
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s;
animation-timing-function: ease-in-out;
animation-iteration-count: 2;
animation-delay: 2s;
/* transform-origin(50% 6px);*/
}
#subscribeButtonText {
color: #FFF;
font-family: Verdana, sans-serif;
font-size: .8rem;
padding: 5px;
text-align: center;
text-transform: uppercase;
}
#-webkit-keyframes shake {
0%, 100% { transform(rotate(0)); }
20%, 60% { transform(rotate(6deg)); }
40%, 80% { transform(rotate(-6deg)); }
}
#keyframes shake {
0%, 100% { transform(rotate(0)); }
20%, 60% { transform(rotate(6deg)); }
40%, 80% { transform(rotate(-6deg)); }
}
<div id="subscribeButton">
<img src="https://images-na.ssl-images-amazon.com/images/I/41ft-avvlhL.jpg" alt="bell">
<div id="subscribeButtonText">Subscribe for Inventory Notifications</div>
</div>
Updated keyframe code:
#keyframes shake {
0%,
100% {
transform: rotate(0deg);
}
10%,
40% {
transform: rotate(6deg);
}
40%,
60% {
transform: rotate(0deg);
}
60%,
90% {
transform: rotate(-6deg);
}
}
Your keyframe rules have some typos
#keyframes shake {
0%,
100% {
transform: rotate(0deg);
}
20%,
60% {
transform: rotate(6deg);
}
40%,
80% {
transform: rotate(-6deg);
}
}
#subscribeButton {
width: 50%;
height: 150px;
background: #1b8c00;
background: #5fae4c;
border: 2px solid #fff;
cursor: pointer;
}
#subscribeButton img {
width: 70px;
height: auto;
display: block;
margin: 10px auto;
text-align: center;
animation-name: shake;
animation-timing-function: ease-in-out;
animation-duration: .5s;
animation-iteration-count: 2;
animation-delay: .5s;
}
#keyframes shake {
0%,
100% {
transform: rotate(0deg);
}
20%,
60% {
transform: rotate(6deg);
}
40%,
80% {
transform: rotate(-6deg);
}
}
<div id="subscribeButton">
<img src="https://images-na.ssl-images-amazon.com/images/I/41ft-avvlhL.jpg" alt="bell">
</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>
I'm using this fun scrolling text effect on my 404 page, but I need the (short) text to stop and just remain visible once it reaches the top of the page instead of scrolling all the way up and away. How do I make that happen with just CSS? I'd like to use as little js as possible.
I butchered the codebase a bit, but basically you want to remove infinite iteration count from the slide animations and add in its place forward (which is a fill mode). Then you want to replace the top values in the animations with top: 0%. Lastly, you want to remove the black fade on #titles:after which can be done by either removing it entirely or lowering its opacity. Still needs work, but this is the general idea (going to have to run it in "Full page" mode):
#import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);
* { padding: 0; margin: 0; }
body, html
{
width: 100%;
height: 100%;
font-family: "Droid Sans", arial, verdana, sans-serif;
font-weight: 700;
color: #ff6;
background-color: #000;
overflow: hidden;
}
p#start
{
position: relative;
width: 16em;
font-size: 200%;
font-weight: 400;
margin: 20% auto;
color: #4ee;
opacity: 0;
z-index: 1;
-webkit-animation: intro 2s ease-out;
-moz-animation: intro 2s ease-out;
-ms-animation: intro 2s ease-out;
-o-animation: intro 2s ease-out;
animation: intro 2s ease-out;
}
#-webkit-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
#-moz-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
#-ms-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
#-o-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
#keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
h1
{
position: absolute;
width: 2.6em;
left: 50%;
top: 25%;
font-size: 10em;
text-align: center;
margin-left: -1.3em;
line-height: 0.8em;
letter-spacing: -0.05em;
color: #000;
text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
opacity: 0;
z-index: 1;
-webkit-animation: logo 5s ease-out 2.5s;
-moz-animation: logo 5s ease-out 2.5s;
-ms-animation: logo 5s ease-out 2.5s;
-o-animation: logo 5s ease-out 2.5s;
animation: logo 5s ease-out 2.5s;
}
h1 sub
{
display: block;
font-size: 0.3em;
letter-spacing: 0;
line-height: 0.8em;
}
#-webkit-keyframes logo {
0% { -webkit-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -webkit-transform: scale(0.1); opacity: 0; }
}
#-moz-keyframes logo {
0% { -moz-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -moz-transform: scale(0.1); opacity: 0; }
}
#-ms-keyframes logo {
0% { -ms-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -ms-transform: scale(0.1); opacity: 0; }
}
#-o-keyframes logo {
0% { -o-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -o-transform: scale(0.1); opacity: 0; }
}
#keyframes logo {
0% { transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { transform: scale(0.1); opacity: 0; }
}
/* the interesting 3D scrolling stuff */
#titles
{
position: absolute;
width: 18em;
height: 10em;
bottom: 0;
left: 50%;
margin-left: -9em;
font-size: 350%;
text-align: justify;
overflow: hidden;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(300px) rotateX(25deg);
-moz-transform: perspective(300px) rotateX(25deg);
-ms-transform: perspective(300px) rotateX(25deg);
-o-transform: perspective(300px) rotateX(25deg);
transform: perspective(300px) rotateX(25deg);
}
#titles:after
{
position: absolute;
content: ' ';
left: 0;
right: 0;
top: 0;
bottom: 60%;
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
background-image: linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
pointer-events: none;
}
#titles p
{
text-align: justify;
margin: 0.8em 0;
}
#titles p.center
{
text-align: center;
}
#titles a
{
color: #ff6;
text-decoration: underline;
}
#titlecontent
{
position: absolute;
top: 100%;
width: 100%;
-webkit-animation: scroll 10s linear 4s forwards;
-moz-animation: scroll 10s linear 4s forwards;
-ms-animation: scroll 10s linear 4s forwards;
-o-animation: scroll 10s linear 4s forwards;
animation: scroll 10s linear 4s forwards;
}
/* animation */
#-webkit-keyframes scroll {
0% { top: 100%; }
100% { top: 0% }
}
#-moz-keyframes scroll {
0% { top: 100%; }
100% { top: 0% }
}
#-ms-keyframes scroll {
0% { top: 100%; }
100% { top: 0% }
}
#-o-keyframes scroll {
0% { top: 100%; }
100% { top: 0% }
}
#keyframes scroll {
0% { top: 100%; }
100% { top: 0% }
}
<p id="start">A short time ago in a browser very, very close…</p>
<h1>STAR WARS<sub>titles in CSS3</sub></h1>
<div id="titles"><div id="titlecontent">
<p class="center">ERROR 404</p>
<p class="center">Page not found</p>
</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);
}
}
I've been trying to get a simple CSS animation to work. Check this link here for the demo.
In Firefox it works fine, but I can't get it to work in Chrome/Safari.
My CSS code is ~
.pin {
width: 30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: #00cae9;
position: absolute;
transform: rotate(-45deg);
left: 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 {
animation-name: bounce;
animation-fill-mode: both;
animation-duration: 1s;
}
.pulse {
background: #d6d4d4;
border-radius: 50%;
height: 14px;
width: 14px;
position: absolute;
left: 50%;
margin: 11px 0px 0px -12px;
transform: rotateX(55deg);
z-index: -2;
}
.pulse:after {
content: "";
border-radius: 50%;
height: 40px;
width: 40px;
position: absolute;
margin: -13px 0 0 -13px;
animation: pulsate 1s ease-out;
animation-iteration-count: infinite;
opacity: 0;
box-shadow: 0 0 1px 2px #00cae9;
animation-delay: 1.1s;
}
#keyframes pulsate {
0% {
transform: scale(0.1, 0.1);
-webkit-transform: scale(0.1, 0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
opacity: 0;
}
}
#-webkit-keyframes pulsate {
0% {
transform: scale(0.1, 0.1);
-webkit-transform: scale(0.1, 0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
opacity: 0;
}
}
#keyframes bounce {
0% {
opacity: 0;
transform: translateY(-2000px) rotate(-45deg);
-webkit-transform: translateY(-2000px) rotate(-45deg);
}
60% {
opacity: 1;
transform: translateY(30px) rotate(-45deg);
-webkit-transform: translateY(30px) rotate(-45deg);
}
80% {
transform: translateY(-10px) rotate(-45deg);
-webkit-transform: translateY(-10px) rotate(-45deg);
}
100% {
transform: translateY(0) rotate(-45deg);
-webkit-transform: translateY(0) rotate(-45deg);
}
}
#-webkit-keyframes bounce {
0% {
opacity: 0;
transform: translateY(-2000px) rotate(-45deg);
-webkit-transform: translateY(-2000px) rotate(-45deg);
}
60% {
opacity: 1;
transform: translateY(30px) rotate(-45deg);
-webkit-transform: translateY(30px) rotate(-45deg);
}
80% {
transform: translateY(-10px) rotate(-45deg);
-webkit-transform: translateY(-10px) rotate(-45deg);
}
100% {
transform: translateY(0) rotate(-45deg);
-webkit-transform: translateY(0) rotate(-45deg);
}
}
Can anyone point out where I'm going wrong?
You forgot to add -webkit- to your animation and transform. Check this fiddle in chrome its working http://jsfiddle.net/Gt4rP/2/
CSS
.pin {
width: 30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: #00cae9;
position: absolute;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
left: 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;
animation-name: bounce;
animation-fill-mode: both;
animation-duration: 1s;
}
.pulse {
background: #d6d4d4;
border-radius: 50%;
height: 14px;
width: 14px;
position: absolute;
left: 50%;
margin: 11px 0px 0px -12px;
transform: rotateX(55deg);
-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;
animation: pulsate 1s ease-out;
animation-iteration-count: infinite;
animation-delay: 1.1s;
}