I have this icon (png)
and I was wondering how to create it only using HTML and CSS and animated, so those 3 quadrangles keep on changing their opacity (one after each other), so it looks kinda like a loader.
Any ideas?
Thanks!
Check this http://jsfiddle.net/jo3d9f27/
HTML
<div id="down"></div>
<div id="down1"></div>
<div id="down2"></div>
CSS
#down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
opacity:0;
border-top: 20px solid #f00;
}
#down1 {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
#down2 {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
#-webkit-keyframes anim{
from{opacity:0;}
to{opacity:1;}
}
#down{
-webkit-animation:anim 4s;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function: ease-in-out;
}
#-webkit-keyframes anim2{
from{opacity:0;}
to{opacity:1;}
}
#down1{
-webkit-animation:anim2 4s;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function: ease-in-out;
}
#-webkit-keyframes anim3{
from{opacity:0;}
to{opacity:1;}
}
#down2{
-webkit-animation:anim 4s;
-webkit-animation-delay:3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function: ease-in-out;
}
DEMO
http://jsfiddle.net/rijosh/u5r5vrk2/2/
HTML
<div id="mouse-scroll" class="ng-scope" style="display: block;">
<div class="mouse"><div class="wheel"></div></div>
<div><span class="unu"></span> <span class="doi"></span> <span class="trei"></span> </div>
</div>
CSS
#mouse-scroll {position:fixed;margin:auto;left:50%;bottom:80px;-webkit-transform:translateX(-50%);z-index:9999}
#mouse-scroll span {display:block;width:5px;height:5px;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);border-right:2px solid #dddddd;border-bottom:2px solid #dddddd;margin:0 0 3px 5px}
#mouse-scroll .unu {margin-top:6px}
#mouse-scroll .unu, #mouse-scroll .doi, #mouse-scroll .trei {-webkit-animation:mouse-scroll 1s infinite;-moz-animation:mouse-scroll 1s infinite}
#mouse-scroll .unu {-webkit-animation-delay:.1s;-moz-animation-delay:.1s;-webkit-animation-direction:alternate}
#mouse-scroll .doi {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;-webkit-animation-direction:alternate}
#mouse-scroll .trei {-webkit-animation-delay:.3s;-moz-animation-delay:.3s;-webkit-animation-direction:alternate}
#mouse-scroll .mouse {height:21px;width:14px;border-radius:10px;-webkit-transform:none;-ms-transform:none;transform:none;border:2px solid #dddddd;top:170px}
#mouse-scroll .wheel {height:5px;width:2px;display:block;margin:5px auto;background:#dddddd;position:relative}
#mouse-scroll .wheel {-webkit-animation:mouse-wheel 1.2s ease infinite;-moz-animation:mouse-wheel 1.2s ease infinite}
#-webkit-keyframes mouse-wheel {
0% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
100% {opacity:0;-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px)}
}
#-webkit-keyframes mouse-wheel {
0% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
100% {opacity:0;-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px)}
}
Related
This question already has answers here:
How to have css3 animation to loop forever
(3 answers)
Closed 2 years ago.
Having this html/css snippet:
.triangle-four {
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 250px solid rgb(20, 97, 27);
margin-top: -120px;
animation-name: example;
animation-duration: 4s;
}
#keyframes example {
0% {
background-color: red;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
<div class="triangle-four"></div>
I want to make it run infinitely and tried to do it like this:
animation-duration: 4s infinite;
It doesn't work, the animation is not working anymore even thought this is what is recommended to do on w3schools.
Any ideas?
I remove animation-name: example; animation-duration: 4s; and add this animation: example 5s infinite; it will fix your problem.
another solution it just to add this without removing anything :
animation-iteration-count: infinite;
.triangle-four {
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 250px solid rgb(20, 97, 27);
margin-top: -120px;
animation: example 5s infinite;
}
#keyframes example {
0% {
background-color: red;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
}
<div class="triangle-four"></div>
On the link provided, it says that the animation property is a shorthand for multiple animation properties.
You have to specify the animation-name and the animation-duration. You may then add the animation-iteration-count.
.triangle-four {
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 250px solid rgb(20, 97, 27);
margin-top: -120px;
animation: 4s example infinite;
}
#keyframes example {
0% {
background-color: red;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
<div class="triangle-four"></div>
just add
animation-iteration-count: infinite;
it will solve the issue
Adding the following css should fix it:
animation-duration: 4s;
animation-iteration-count: infinite;
.triangle-four {
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 250px solid rgb(20, 97, 27);
margin-top: -120px;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#keyframes example {
0% {
background-color: red;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
<div class="triangle-four"></div>
Of course, the end of the animation "jumps" to red, but that is the effect described by your animation. If that was not intended, you can simply add this css:
animation-direction: alternate;
I'm trying to make simple animation of a circle which border goes from red to transparent color. How I'm trying to do it is to set initial color as red and then animate it to transparent with keyframes like so:
.pulse{
margin: 20px;
width:100px;
height: 100px;
background-color: red;
border-radius: 100px;
animation-name: pulse;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease;
}
#keyframes pulse{
0%{border:solid 1px rgba(255, 0, 0, 1)}
100%{border:solid 1px rgba(255, 0, 0, 0)}
}
<div class="animation">
<div class="pulse"></div>
</div>
Seemingly nothing happens but after fiddling with it a bit I'm aware that the animation actually works, but the transparent animation is shown on top of existing red border and effect is that it looks like nothing is happening.
What i'm trying to achive is to have the border go from red to transparent, making it look like it's pulsating but without the circle changing it's size.
Try box-shadow instead of border
Stack Snippet
.pulse {
margin: 20px;
width: 100px;
height: 100px;
background-color: red;
border-radius: 100px;
animation-name: pulse;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
#keyframes pulse {
0% {
box-shadow: 0 0 0 4px rgba(255, 0, 0, 1);
}
100% {
box-shadow: 0 0 0 0px rgba(255, 0, 0, 1);
}
}
<div class="animation">
<div class="pulse"></div>
</div>
You won't see anything because you background-color is the same color as the border color. Also your border definition inside your animation was wrong, the width must come before the border style:
So for example it's 1px solid color instead of solid 1px rgba(255,0,0,1).
.pulse {
animation: pulse 1s ease infinite alternate;
background-color: #ddd;
border-radius: 100px;
height: 100px;
margin: 20px;
width: 100px;
}
#keyframes pulse {
0% {
border: 1px solid rgba(255, 0, 0, 1)
}
100% {
border: 1px solid rgba(255, 0, 0, 0)
}
}
<div class="animation">
<div class="pulse"></div>
</div>
But i think you want to achieve a pulsating effect, therefore i would recommend you to use transform: scale() to create the desired effect.
#keyframes pulse{
from { transform: scale(1) }
to { transform: scale(.75) }
}
.pulse{
margin: 20px;
width:100px;
height: 100px;
border-radius: 100px;
background-color: red;
animation: pulse 1s ease infinite alternate;
}
<div class="animation">
<div class="pulse"></div>
</div>
Just add background-clip: padding-box; to the .pulse element. More info here. As said in the previous answer, you can also use the box-shadow, but you have to keep in mind that box shadow does not take space around the element. So You will have a different behavior.
.pulse {
background-clip: padding-box;
margin: 20px;
width:100px;
height: 100px;
background-color: red;
border-radius: 100px;
animation-name: pulse;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
#keyframes pulse{
0%{border:solid 1px rgba(255, 0, 0, 1)}
100%{border:solid 1px rgba(255, 0, 0, 0)}
}
<div class="animation">
<div class="pulse"></div>
</div>
I have a problem with CSS that I am trying to solve and at this point I need your help.
I have a #keyframes animation that changes the width of a class which have overflow hidden.
The animation has 9 frames and it is working perfectly at this point.
//the working code
h1.imgholder { // This is the object that will animate.
overflow: hidden;
height: 90px;
width: 415px;
margin-left: 46%;
-webkit-animation-name: example; // animation name
-webkit-animation-duration: 3.5s; //animation duration
animation-name: example; // animation name
animation-duration: 3.5s; //animation duration
}
.img {
float: left;
}
#-webkit-keyframes example {
0% {
width: 85px;
-webkit-animation-timing-function: linear;
}
24.51% {
width: 85px;
-webkit-animation-timing-function: linear;
}
25% {
width: 195px;
-webkit-animation-timing-function: linear;
}
49.51% {
width: 195px;
-webkit-animation-timing-function: linear;
}
50% {
width: 295px;
-webkit-animation-timing-function: linear;
}
74.51% {
width: 295px;
-webkit-animation-timing-function: linear;
}
75% {
width: 322px;
-webkit-animation-timing-function: linear;
}
99.51% {
width: 322px;
-webkit-animation-timing-function: linear;
}
100% {
width: 415px;
-webkit-animation-timing-function: linear;
}
}
Now what I want is that at some frames to add another animation property like border-right: solid #000;
Like at frame 1, 3, 5, 7, 9 = no border, frame 2, 4, 6, 8 = border-right: solid #000;
//code here for example "tried this, didn't work"
#-webkit-keyframes example {
0% {
width: 85px;
-webkit-animation-timing-function: linear;
}
24.51% {
width: 85px;
border-right: solid #000; //show border
-webkit-animation-timing-function: linear;
}
25% {
width: 195px;
-webkit-animation-timing-function: linear;
}
49.51% {
width: 195px;
border-right: solid #000; //show border
-webkit-animation-timing-function: linear;
}
50% {
width: 295px;
-webkit-animation-timing-function: linear;
}
74.51% {
width: 295px;
border-right: solid #000; //show border
-webkit-animation-timing-function: linear;
}
75% {
width: 322px;
-webkit-animation-timing-function: linear;
}
99.51% {
width: 322px;
border-right: solid #000; //show border
-webkit-animation-timing-function: linear;
}
100% {
width: 415px;
-webkit-animation-timing-function: linear;
}
}
What am I doing wrong? How can I make this class that it will show border on specific frames, and remove or "hide" them on other frames.
Any help is appreciated, thanks for your time and sorry for my bad english :p.
I can't quite figure out why it works this way but the animation seems to work well only when you set the border-right on the parent element. As you can see in the below snippet, once that is done the rest of your code works fine.
Also, based on your statement remove or "hide" them on other frames, you may want to consider adding a border-right: none in the other frames because once a property is added in one frame it doesn't go away unless removed. I have added both versions in the snippet for the difference to be visible.
h1.imgholder {
overflow: hidden;
height: 90px;
width: 415px;
-webkit-animation-name: example;
-webkit-animation-duration: 3.5s;
-webkit-animation-timing-function: linear;
animation-name: example;
animation-duration: 3.5s;
animation-timing-function: linear;
border-right: 1px solid transparent;
}
.img {
float: left;
}
#-webkit-keyframes example {
0% {
width: 85px;
}
24.51% {
width: 85px;
border-right: 1px solid #000;
}
25% {
width: 195px;
}
49.51% {
width: 195px;
border-right: 1px solid #000;
}
50% {
width: 295px;
}
74.51% {
width: 295px;
border-right: 1px solid #000;
}
75% {
width: 322px;
}
99.51% {
width: 322px;
border-right: 1px solid #000;
}
100% {
width: 415px;
}
}
/* Just for demo */
h1.imgholder#two{
-webkit-animation-name: example2;
-webkit-animation-duration: 3.5s;
-webkit-animation-timing-function: linear;
animation-name: example2;
animation-duration: 3.5s;
animation-timing-function: linear;
border-right: 1px solid transparent;
}
#-webkit-keyframes example2 {
0% {
width: 85px;
border-right: none;
}
24.51% {
width: 85px;
border-right: 1px solid #000;
}
25% {
width: 195px;
border-right: none;
}
49.51% {
width: 195px;
border-right: 1px solid #000;
}
50% {
width: 295px;
border-right: none;
}
74.51% {
width: 295px;
border-right: 1px solid #000;
}
75% {
width: 322px;
border-right: none;
}
99.51% {
width: 322px;
border-right: 1px solid #000;
}
100% {
width: 415px;
border-right: none;
}
}
<h1 class="imgholder">
<img src="http://lorempixel.com/100/100" alt="" class='img'>
</h1>
<!-- Just for demo -->
<h1 class="imgholder" id ='two'>
<img src="http://lorempixel.com/100/100" alt="" class='img'>
</h1>
I have a link that i want to animate his border from 1px to 5px on click and in the end of the animation i want the 1px to stay, i am using animation-fill-mode with backwards but i see that the 1px border does not apply after the animation is finish.
document.querySelector('a').onclick = function() {
this.classList.add('border-g');
}
/* Styles go here */
body {
margin: 100px;
}
a {
border: 1px solid transparent;
display: inline-block;
padding: 20px;
}
.border-g {
-webkit-animation: border-grow 0.5s;
animation: border-grow 0.5s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}
#-webkit-keyframes border-grow {
from {
border: 1px solid #D74C43;
}
to {
border: 5px solid #D74C43;
}
}
#keyframes border-grow {
from {
border: 1px solid #D74C43;
}
to {
border: 5px solid #D74C43;
}
}
<a>Hello world</a>
In this instance, you have to define the final state in your CSS first.
Then define the new start point in your animation
body {
margin: 100px;
}
a {
border: 1px solid #D74C43;
/* end like this */
display: inline-block;
padding: 20px;
-webkit-animation: border-grow 0.5s;
animation: border-grow 0.5s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}
#-webkit-keyframes border-grow {
from {
border: 1px solid transparent;
/* starts like this */
}
to {
border: 5px solid #D74C43;
/* animation ends then switches to final state */
}
}
#keyframes border-grow {
from {
border: 1px solid transparent;
}
to {
border: 5px solid #D74C43;
}
}
<a>Hello world</a>
EDIT
To solve your updated question...the default states would need to be applied to the border-g class.
Otherwise the answer remains as previously.
document.querySelector('a').onclick = function() {
this.classList.add('border-g');
}
body {
margin: 100px;
}
a {
display: inline-block;
padding: 20px;
}
a.border-g {
border: 1px solid #D74C43;
-webkit-animation: border-grow 0.5s;
animation: border-grow 0.5s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}
#-webkit-keyframes border-grow {
from {
border: 1px solid transparent;
}
to {
border: 5px solid #D74C43;
}
}
#keyframes border-grow {
from {
border: 1px solid transparent;
}
to {
border: 5px solid #D74C43;
}
}
<a>Hello world</a>
From what I read on w3.org, in case of animation-fill-mode: backwards, the properties defined in the keyframe (from or to) will only apply to animation-delay period:
4.9. The animation-fill-mode property
backwards
During the period defined by animation-delay, the animation
will apply the property values defined in the keyframe that will start
the first iteration of the animation. These are either the values of
the from keyframe (when animation-direction is normal or alternate) or
those of the to keyframe (when animation-direction is reverse or
alternate-reverse).
I use the CSS code from here for my website loader. I am having problem with IE and Mozilla everything doesn't look and work the way is supposed to.
In IE there's not animation and the graphics break, and in Mozilla is not animation and the graphics doesn't look right as well.
#bg: #2c3e50;
/*.triangle(#triangle: border-left: 60px solid transparent;
border-right: solid transparent;
border-top: 0 solid transparent;);*/
body{
background: #bg;
}
.loader {
border-radius: 50%;
margin: 0 auto;
position: absolute;
top: 40%;
left: 0;
right: 0;
height: 50px;
width: 50px;
}
.tri {
animation: translateRotation 1.5s infinite reverse;
-webkit-animation: translateRotation 1.5s infinite reverse;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 0 solid transparent;
border-bottom: 60px solid #00b4ff;
width: 0px;
z-index: 2;
}
.tri2 {
animation: translateRotation 1.5s infinite;
-webkit-animation: translateRotation 1.5s infinite;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 0px solid transparent;
border-bottom: 40px solid #ffde15;
width: 0px;
z-index: 1;
}
.tri3 {
animation: translateRotation 1.5s infinite;
-webkit-animation: translateRotation 1.5s infinite;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 40px solid #1da158;
border-bottom: 0px solid transparent;
width: 0px;
z-index: 1;
}
.tri4 {
animation: translateRotation 1.5s infinite reverse;
-webkit-animation: translateRotation 1.5s infinite reverse;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea343f;
border-bottom: 0px solid transparent;
width: 0px;
z-index: 2;
}
.circ {
border: 30px solid rgba(255,255,255,0.1);
}
.circ2 {
border: 25px solid rgba(255,255,255,1);
box-sizing: border-box;
box-shadow: 0 2px 1px rgba(0,0,0, 0.15), 0 -2px 1px rgba(0,0,0, 0.15), -2px 0 1px rgba(0,0,0, 0.15), 2px 0 1px rgba(0,0,0, 0.15);
margin-top: 30px;
z-index: 90;
}
/* ANIMATE */
#-webkit-keyframes translateRotation {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg);}
}
The problem is that you are using only #-webkit-keyframes instead of #keyframes and -webkit-transform instead of transform which are supported without prefixes since IE10+
You should add this code above your animation keyframe and should work on IE10+:
#keyframes translateRotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg);}
}
Check here keyframe-animation-syntax to see all the prefixes.
For IE9 you probably should use Javascript animations like jQuery/jQueryUI, you can check if is necessary to use using Modernizr
if(!Modernizr.cssanimations) {
// Fallback
}