img {
text-align: center;
width: 20px;
margin: auto;
display: block;
-webkit-animation: rotateSpinner 1.2s linear infinite;
}
demo http://jsfiddle.net/cfe2ym54/
What is the problem here?
you forgot to add keyframes
img {
text-align: center;
width: 20px;
margin: auto;
display: block;
-webkit-animation: rotateSpinner 1.2s linear infinite;
animation: rotateSpinner 1.2s linear infinite;
}
#-webkit-keyframes rotateSpinner {
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes rotateSpinner {
to {
transform: rotate(360deg);
}
}
<div class="loading">
<img src="http://assets.57square.com/img/loading.png">
</div>
Related
I have created sample
CodePen here.
I tried below but didn't work.
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
}
#-webkit-keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
#keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
As you will see this sample has 3 images. I give them id = "imge1", "imge2", "imge3"
img3 keeps rotating using keyframe.
I need to show img1 and img2 showing kinda fadein-fadeout effect.
so when img3 rotates to bottom that time may be fadeout img1 and fadeIn img2. (or other way around is fine)
basically 2 images should keep replacing with some fade effect and img3 keeps rotating.
Here is a link I tried but could not achieve solution.
CSS animation, fade in fade out opacity on automated slideshow
CSS how to make an element fade in and then fade out?
also, this needs to be done using pure-css only. I have to put this in nextjs project.
Thanks
You need animation-delay and animation-iteration-count to achieve that
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
figure{
width: 100vw;
height: 50vh;
position: relative;
background: green;
text-align: center;
}
picture{
position: relative;
display: inline-block;
width: 25%;
}
picture img{
width: 100%
}
picture:not(:last-of-type){opacity: 0}
picture:first-of-type{
background: red;
animation: fadeinout 4s linear forwards infinite;
}
picture:nth-child(2){
background: red;
animation: fadeinout 4s 2s linear forwards infinite;/*you need to add the delay here*/
}
picture:last-of-type{
animation: spin 4s linear infinite;
}
figcaption{
position: absolute;
bottom: 0;
left:0;
width: 100%;
}
#keyframes fadeinout {
50% { opacity: 1; }
}
#keyframes spin {
to { transform: rotate(360deg);}
}
<figure>
<picture>img1</picture>
<picture>img2</picture>
<picture>
<img class="img3" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81f928d7217864bf001225/img/login-radar-1.png" alt="img" />
</picture>
<figcaption>Css Labs</figcaption>
</figure>
See below. I added a background color to the third image to make it visible.
#img3 {
background-color: red; /* to make it visible */
}
.flexDisplay {
display: flex;
}
.wrapper {
display: flex;
justify-content: space-evenly;
}
.loginImage {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.img1 {
animation: spin 3s linear infinite;
opacity: 0.1;
width: 200px;
height: 200px;
align-items: center;
}
.elementToFadeInAndOut {
width: 200px;
height: 200px;
background: red;
animation: fadeinout 4s linear infinite;
}
#keyframes fadeinout {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
<div class="flexDisplay">
<div class="wrapper">
<img id="img1" class="elementToFadeInAndOut" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81fc3f75aec5860f52b6a0/img/loginsuper-rectangle-copy.png " class="loginImage" alt="branding logo" />
<img id="img2" class="elementToFadeInAndOut" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81fc3f75aec5860f52b6a0/img/loginsuper-rectangle.png" class="loginImage elementToFadeInAndOut" alt="branding logo" />
<img id="img3" class="img1" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81f928d7217864bf001225/img/login-radar-1.png" alt="img" />
</div>
</div>
Basically, you need to apply 2 different animation functions to the different elements.
I have used z-index to let the images overlap each other and
set the infinite property for the duration of your animation.
You can set an interval for your images using animation-delay.
.flexDisplay{
display: flex;
background: #f1f1f1;
}
.wrapper{
display: flex
}
.img1{
z-index:3;
}
.loginImage1{
width: 100%;
height: 100%;
position:absolute;
left:0;
top:0;
z-index:1;
}
.loginImage2{
width: 100%;
height: 100%;
position:absolute;
left:0;
top:0;
z-index:2;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.img1{
animation: spin 3s linear infinite;
width: 200px;
height: 200px;
align-items: center;
}
.img2{
position: relative;
width: 200px;
height: 200px;
}
.elementToFadeInAndOut1 {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear infinite;
animation: fadeinout 4s linear infinite;
}
#-webkit-keyframes fadeinout {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#keyframes fadeinout {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.elementToFadeInAndOut2 {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear infinite;
animation: fadeinout 4s linear infinite;
animation-delay:5s;
}
#-webkit-keyframes fadeinout1 {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#keyframes fadeinout1 {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
Created this pen: https://codepen.io/spaceCadett/pen/wvKKowL
I have a loading page while the website is loading. It works fine in Chrome but I need to fix it on Safari because it's not working. Here's my code:
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #fff;
}
.loading {
top: 30%;
right: 45%;
position: fixed;
-webkit-animation: spinHorizontal 4s linear infinite;
-moz-animation: spinHorizontal 4s linear infinite;
animation: spinHorizontal 4s linear infinite;
}
#keyframes spinHorizontal {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
<div class="se-pre-con">
<div class="loading">
<img src="http://www.pngmart.com/files/4/Circle-PNG-Picture-279x279.png">
</div>
It appears it has to do with the position: fixed on the .se-pre-con element. Try using absolute positioning or positioning it in another way.
.se-pre-con {
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #ffffff;
}
.loading {
width: 279px;
height: 279px;
top: 30%;
right: 45%;
position: fixed;
-webkit-backface-visibility: visible;
-webkit-animation: spinHorizontal 2s linear infinite;
-moz-animation: spinHorizontal 2s linear infinite;
animation: spinHorizontal 2s linear infinite;
background-color: transparent;
}
#keyframes spinHorizontal {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
}
<div class="se-pre-con">
<div class="loading">
<img src="http://www.pngmart.com/files/4/Circle-PNG-Picture-279x279.png" />
</div>
</div>
I'm having a hard time making this preloader animation in CSS.
This is what I'm trying to make.
What am I doing wrong?
.l {
animation: pulse .8s infinite linear;
}
.m {
animation: pulse .8s infinite linear;
animation-delay: .2s;
}
.r {
animation: pulse .8s infinite linear;
animation-delay: .4s;
}
#keyframes pulse {
0% { padding: 8px; }
50% { padding: 16px; }
100% { padding: 8px; }
}
html, body {
height: 100%;
}
.table {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.circle {
display: inline-block;
padding: 8px;
margin: 0 0.6em;
background: #000;
border-radius: 100%;
}
.l {
animation: pulse .8s infinite linear;
}
.m {
animation: pulse .8s infinite linear;
animation-delay: .2s;
}
.r {
animation: pulse .8s infinite linear;
animation-delay: .4s;
}
#keyframes pulse {
0% { padding: 8px; }
50% { padding: 16px; }
100% { padding: 8px; }
}
<div class="table">
<div class="cell">
<div class="circle l"></div>
<div class="circle m"></div>
<div class="circle r"></div>
</div>
</div>
Use step-end:
animation: pulse .8s infinite step-end;
body{
padding-top: 40px; /* for demonstration purpose */
}
.table {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.circle {
display: inline-block;
padding: 8px;
margin: 0 0.6em;
background: #000;
border-radius: 100%;
}
.l {
animation: pulse 2s infinite step-end;
animation-delay: .2s;
}
.m {
animation: pulse 2s infinite step-end;
animation-delay: .4s;
}
.r {
animation: pulse 2s infinite step-end;
animation-delay: .6s;
}
#keyframes pulse {
0% { transform: scale( 1 ); }
50% { transform: scale( 2 ); }
100% { transform: scale( 1 ); }
}
<div class="table">
<div class="cell">
<div class="circle l"></div>
<div class="circle m"></div>
<div class="circle r"></div>
</div>
</div>
JSFiddle
Now just adjust the animation duration and delay time to make it more like in the OP.
Update: use transform: scale() to make the circle expand from its centar - reference
I have extra frames to the animation. Check below answer.
html,
body {
height: 100%;
}
.table {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.circle {
display: inline-block;
padding: 8px;
margin: 0 0.5em;
background: #000;
border-radius: 100%;
}
.l {
animation: pulse 2s infinite linear;
}
.m {
animation: pulse 2s infinite linear;
animation-delay: .3s;
}
.r {
animation: pulse 2s infinite linear;
animation-delay: .6s;
}
#keyframes pulse {
10% {
transform: scale(1);
}
20% {
transform: scale(1);
}
30% {
transform: scale(1.7);
}
50% {
transform: scale(1.7);
}
70% {
transform: scale(1.7);
}
80% {
transform: scale(1);
}
90% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
<div class="table">
<div class="cell">
<div class="circle l"></div>
<div class="circle m"></div>
<div class="circle r"></div>
</div>
</div>
I am trying to make a box slide in from the left of my page while in the viewport, however it's making my page too wide and I can't get it to reverse once out of the viewport once I've scrolled past it. This is what I have:
.box {
background: #2db34a;
border-radius: 6px;
cursor: pointer;
height: 95px;
line-height: 95px;
text-align: center;
transition-property: background;
transition-duration: 1s;
transition-timing-function: linear;
width: 95px;
margin-top: 500px;
}
#slide {
position: absolute;
right: -100px;
width: 100px;
height: 100px;
background: blue;
overflow: hidden;
animation: slide 0.5s forwards;
animation-delay: 1s
-webkit-animation: moveToRight .6s ease both;
animation: moveToRight .6s ease both;
-webkit-animation: moveFromRight .6s ease both;
animation: moveFromRight .6s ease both;
}
#-webkit-keyframes moveToRight {
from { }
to { -webkit-transform: translateX(100%); }
}
#keyframes moveToRight {
from { }
to { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
#-webkit-keyframes moveFromRight {
from { -webkit-transform: translateX(100%); }
}
#keyframes moveFromRight {
from { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
</style>
</head>
<body>
<div id="slide" class="box">Box</div>
</body>
</html>
I can't use any plug-ins to do this either.
I am trying to implement a spinner only using CSS that looks like on following image, see the picture. Only one piece of the spinner is filled with color at a time.
In the following fiddle, there is a similar spinner, but I need to rotate the whole spinner (22.5°) and also to modify its rays.
http://jsfiddle.net/ucsnaukf/
HTML:
<div class="spinner"><div>Loading…</div></div>
CSS:
#-webkit-keyframes spin {
to { transform: rotate(1turn); }
}
#-moz-keyframes spin {
to { transform: rotate(1turn); }
}
#-ms-keyframes spin {
to { transform: rotate(1turn); }
}
#keyframes spin {
to { transform: rotate(1turn); }
}
.spinner {
position: relative;
display: inline-block;
width: 5em;
height: 5em;
margin: 0 .5em;
font-size: 12px;
text-indent: 999em;
overflow: hidden;
-webkit-animation: spin 0.8s infinite steps(8);
-moz-animation: spin 0.8s infinite steps(8);
-ms-animation: spin 0.8s infinite steps(8);
-o-animation: spin 0.8s infinite steps(8);
animation: spin 0.8s infinite steps(8);
}
.spinner:before,
.spinner:after,
.spinner > div:before,
.spinner > div:after {
content: '';
position: absolute;
top: 0;
left: 2.25em; /* (container width - part width)/2 */
width: .5em;
height: 1.5em;
border-radius: .2em;
background: #eee;
box-shadow: 0 3.5em #eee; /* container height - part height */
transform-origin: 50% 2.5em; /* container height / 2 */
}
.spinner:before {
background: blue;
}
.spinner:after {
transform: rotate(-45deg);
}
.spinner > div:before {
transform: rotate(-90deg);
}
.spinner > div:after {
transform: rotate(-135deg);
}
Can anyone help?
Here's a start for you (http://jsfiddle.net/ucsnaukf/73/):
<--! HTML -->
<div class="wrapper">
<div class="spinner">
<div>Loading…
</div>
</div>
<div class="circ"></div>
</div>
/* CSS */
#-webkit-keyframes spin {
to { transform: rotate(1turn); }
}
#-moz-keyframes spin {
to { transform: rotate(1turn); }
}
#-ms-keyframes spin {
to { transform: rotate(1turn); }
}
#keyframes spin {
to { transform: rotate(1turn); }
}
.wrapper{
border:1px solid white;
border-radius:100%;
position:relative;
width: 5em;
height: 5em;
border-radius:999px;
overflow:hidden;
}
/* Circular mask */
.circ{
border:1px solid WHITE;
position:absolute;
top:10%;
left:10%;
right:0;
bottom:0;
width:55%;
height:55%;
background-color:#fff;
border-radius:999px;
}
.spinner {
border:1px solid white;
border-radius:100%;/* Round the border */
position: absolute;
display: inline-block;
width: 5em;
height: 5em;
font-size: 12px;
text-indent: 999em;
overflow: hidden;
-webkit-animation: spin 0.8s infinite steps(8);
-moz-animation: spin 0.8s infinite steps(8);
-ms-animation: spin 0.8s infinite steps(8);
-o-animation: spin 0.8s infinite steps(8);
animation: spin 0.8s infinite steps(8);
}
.spinner:before,
.spinner:after,
.spinner > div:before,
.spinner > div:after {
content: '';
position: absolute;
top: 0;
left: 1.8em; /* (container width - part width)/2 */
width: 1.4em; /* longer */
height: .8em; /* shorter */
background: #eee;
box-shadow: 0 4.2em #eee; /* container height - part height */
transform-origin: 50% 2.5em; /* container height / 2 */
}
.spinner:before {
background: purple;
}
.spinner:after {
transform: rotate(-45deg);
}
.spinner > div:before {
transform: rotate(-90deg);
}
.spinner > div:after {
transform: rotate(-135deg);
}
Looks a bit flower like, but continue playing with it and you'll get it the way you want.
You may want to consider used one of the many, great looking, free to use spinners available on the web... check out this massive collection for example: http://codepen.io/collection/HtAne/