I want this effect
http://antonioleiva.com/wp-content/uploads/2014/03/SwipeRefreshLayout.gif
At the moment I have this one http://codepen.io/anon/pen/czulD
Can someone code it like native android swipetorefresh layout?
See code below (same as CodePen example)
HTML
<html>
<body>
<div class="preloader"></div>
</body>
</html>
CSS
.preloader {
height: 5px;
width: 100%;
}
.preloader {
background-size: 100px 100px;
background-image: -moz-linear-gradient(135deg, #fecf23 25%, transparent 25%,transparent 50%, #fecf23 50%, #fecf23 75%,transparent 75%, transparent);
background-image: -webkit-gradient(135deg, #fecf23 25%, transparent 25%,transparent 50%, #fecf23 50%, #fecf23 75%,transparent 75%, transparent);
background-image: -webkit-linear-gradient(135deg, #fecf23 25%, transparent 25%,transparent 50%, #fecf23 50%, #fecf23 75%,transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, #fecf23 25%, transparent 25%,transparent 50%, #fecf23 50%, #fecf23 75%,transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, #fecf23 25%, transparent 25%,transparent 50%, #fecf23 50%, #fecf23 75%,transparent 75%, transparent);
background-image: linear-gradient(135deg, #fecf23 25%, transparent 25%,transparent 50%, #fecf23 50%, #fecf23 75%,transparent 75%, transparent);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fecf23', endColorstr='#34c2e3',GradientType=1 );
background-color: #34c2e3;
-ms-animation: animate-stripes 1.2s linear infinite;
-o-animation: animate-stripes 1.2s linear infinite;
-moz-animation: animate-stripes 1.2s linear infinite;
animation: animate-stripes 1.2s linear infinite;
-webkit-animation: animate-stripes 1.2s linear infinite;
transition: width .4s ease-in-out;
-ms-transition: width .4s ease-in-out;
-o-transition: width .4s ease-in-out;
-webkit-transition: width .4s ease-in-out;
-moz-transition: width .4s ease-in-out;
}
#-ms-keyframes animate-stripes {
0% {
background-position: 0 0;
}
100% {
background-position: 200px 0;
}
}
#-o-keyframes animate-stripes {
0% {
background-position: 0 0;
}
100% {
background-position: 200px 0;
}
}
#-moz-keyframes animate-stripes {
0% {
background-position: 0 0;
}
100% {
background-position: 200px 0;
}
}
#-webkit-keyframes animate-stripes {
0% {
background-position: 0 0;
}
100% {
background-position: 200px 0;
}
}
#keyframes animate-stripes {
0% {
background-position: 0 0;
}
100% {
background-position: 200px 0;
}
}
Since linear-gradients are, in fact, rendered images, they are not animatable (yet).
You can get the effect thinking about it in that way.
The way I use to animate gradients is to interpolate opacity between multiple elements with different gradients. Like this:
http://jsfiddle.net/L9p4swzx/
.container{
position:relative;
width:300px;
height:300px;
border:1px solid black;
}
.container h1{
display:block;
position:relative;
z-index:2;
}
.animated {
z-index:1;
position:absolute;
width:100%;
height:100%;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(21%, #ff670f), color-stop(56%, #ffffff), color-stop(88%, #0eea57));
background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);
background: linear-gradient(135deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);
animation:gra1 5s infinite;
animation-direction:alternate;
-webkit-animation:gra1 5s infinite;
-webkit-animation-direction:alternate;
animation-timing-function:linear;
-webkit-animation-timing-function:linear;
}
.animated2 {
content: ' ';
z-index:1;
position:absolute;
width:100%;
height:100%;
border:1px solid black;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(10%, #ff670f), color-stop(40%, #ffffff), color-stop(60%, #0eea57));
background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);
background: linear-gradient(135deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);
animation-direction:alternate;
-webkit-animation:gra2 5s infinite;
-webkit-animation-direction:alternate;
animation-timing-function:linear;
-webkit-animation-timing-function:linear;
}
.animated3 {
content: ' ';
z-index:1;
position:absolute;
width:100%;
height:100%;
border:1px solid black;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(5%, #ff670f), color-stop(10%, #ffffff), color-stop(40%, #0eea57));
background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);
background: linear-gradient(135deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);
animation-direction:alternate;
-webkit-animation:gra3 5s infinite;
-webkit-animation-direction:alternate;
animation-timing-function:linear;
-webkit-animation-timing-function:linear;
}
#-webkit-keyframes gra {
33% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity:0;
}
}
#-webkit-keyframes gra2 {
33% {
opacity: 0;
}
66% {
opacity: 1;
}
100% {
opacity:0;
}
}
#-webkit-keyframes gra3 {
33% {
opacity: 0;
}
66% {
opacity: 0;
}
100% {
opacity:1;
}
}
With a little bit more of tweaking you can get decent animation.
But for your case, there's a better solution, which is animate the background position, since the gradient changes are similar.
http://jsfiddle.net/3L6tybd5/1/
.container{
position:relative;
width:300px;
height:300px;
border:1px solid black;
}
.container h1{
display:block;
position:relative;
z-index:2;
}
.animated {
z-index:1;
position:absolute;
width:100%;
height:100%;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(5%, #ff670f), color-stop(20%, #ffffff), color-stop(44%, #0eea57));
background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 5%, #ffffff 20%, #0eea57 44%);
background: linear-gradient(135deg, #ff670f 0%, #ff670f 5%, #ffffff 20%, #0eea57 44%);
background-size:200%;
background-position:0px 0px;
animation:gra1 5s infinite;
animation-direction:alternate;
-webkit-animation:gra1 5s infinite;
-webkit-animation-direction:alternate;
animation-timing-function:linear;
-webkit-animation-timing-function:linear;
}
#-webkit-keyframes gra1 {
33% {
background-position:0px 0px;
}
66% {
background-position:-50px -50px;
}
100% {
background-position:-150px -150px;
}
}
Notice that I changed some values of the animation and the gradient so it renderer bigger than the container.
Hope it helps
Related
I want to move my gradient that has multiple colors smoothly but the problem is that the animation is not smooth. It just changes its position at every step.
<style>
.animated {
width: 300px;
height: 300px;
border: 1px solid black;
animation: gra 5s infinite;
animation-direction: reverse;
-webkit-animation: gra 5s infinite;
-webkit-animation-direction: reverse;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
#keyframes gra {
0% {
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(21%, #ff670f), color-stop(56%, #ffffff), color-stop(88%, #0eea57));
background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);
background: linear-gradient(135deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);
}
50% {
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(10%, #ff670f), color-stop(40%, #ffffff), color-stop(60%, #0eea57));
background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);
background: linear-gradient(135deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);
}
100% {
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(5%, #ff670f), color-stop(10%, #ffffff), color-stop(40%, #0eea57));
background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);
background: linear-gradient(135deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);
}
}
</style>
<div class="animated">
<h1>Hello</h1>
</div>
Is it possible to accomplish without using jQuery?
My jsfiddle link is https://jsfiddle.net/bAUK6
Please try this code:
#gradient
{
height:300px;
width:300px;
border:1px solid black;
font-size:30px;
background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00);
background-size: 200% 200%;
-webkit-animation: Animation 5s ease infinite;
-moz-animation: Animation 5s ease infinite;
animation: Animation 5s ease infinite;
}
#-webkit-keyframes Animation {
0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}
}
#-moz-keyframes Animation {
0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}
}
#keyframes Animation {
0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}
}
<html>
<div id="gradient">
Hello
</div>
</html>
Dynamic implementation of Dave's answer:
:root{
--overlay-color-1: #ff0000;
--overlay-color-2: #0000ff;
--anim-duration: 2s;
}
#gradient {
opacity: 0.8;
background: none;
}
#gradient:after,
#gradient:before {
content: '';
display: block;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
#gradient:before {
background: linear-gradient(135deg, var(--overlay-color-2) 0%, var(--overlay-color-1) 100%);
animation: OpacityAnim var(--anim-duration) ease-in-out 0s infinite alternate;
}
#gradient:after {
background: linear-gradient(135deg, var(--overlay-color-1) 0%, var(--overlay-color-2) 100%);
animation: OpacityAnim var(--anim-duration) ease-in-out calc(-1 * var(--anim-duration)) infinite alternate;
}
#keyframes OpacityAnim {
0%{opacity: 1.0}
100%{opacity: 0.0}
}
<div id="gradient"></div>
Using CSS variables it's now a trivial task.
Here is a basic example (hover to see the result)
#property --a{
syntax: '<angle>';
inherits: false;
initial-value: 90deg;
}
#property --l{
syntax: '<percentage>';
inherits: false;
initial-value: 10%;
}
#property --c{
syntax: '<color>';
inherits: false;
initial-value: red;
}
.box {
/* needed for firefox to have a valid output */
--a:80deg;
--l:10%;
--c:red;
/**/
cursor:pointer;
height:200px;
transition:--a 0.5s 0.1s,--l 0.5s,--c 0.8s;
background:linear-gradient(var(--a), var(--c) var(--l),blue,var(--c) calc(100% - var(--l)));
}
.box:hover {
--a:360deg;
--l:40%;
--c:green;
}
<div class="box"></div>
More details here: https://dev.to/afif/we-can-finally-animate-css-gradient-kdk
How about this:
Set the body margin and padding to 0. Set an html rule to 100% height (higher than 100% may be required).
Set the body to the end state for the gradient.
Create an empty div with a background which is the start state for the gradient. Give the empty div 100% height.
Give both the body and the empty div a background-attachment: fixed;
Create a wrapper for your body content.
Set the empty div to position: fixed;
Set the wrapper to position: relative;
Give both a z-index, the wrapper being higher.
Create an animation that will change the opacity of the empty div from 1 to 0 over the desired time. Add animation-fill-mode:forwards; to the div rule so the animation stays where it ends.
It's not as sexy as a real animated gradient shift, but it's as simple as you can get with CSS only and keyframes, I think.
Here is another way. The following has the static gradient containing all phases of the animation, which is then moved inside the outer element. This allows to perform animation smoothly (as the topic suggests), because the only animation here is the element position.
Please note that for the sake of performance the gradient element left unchanged. Although the question was to animate the gradient, moving the background does practically the same thing, while the performance wins!
.animated {
width: 300px;
height: 300px;
overflow: hidden;
position: relative;
border: 1px solid black;
}
.innerGradient {
z-index: -1;
width: 300%;
height: 300%;
position: absolute;
animation: gra 5s infinite;
-webkit-animation: gra 5s infinite;
background: linear-gradient(135deg, #ff670f 0%, #ff670f 20%, #ffffff 50%, #0eea57 80%, #0eea57 100%);
background: -webkit-linear-gradient(135deg, #ff670f 0%, #ff670f 20%, #ffffff 50%, #0eea57 80%, #0eea57 100%);
}
#keyframes gra {
0% { left: -200%; top: -200%; }
50% { left: 0%; top: 0%; }
100% { left: -200%; top: -200%; }
}
<div class="animated">
<h1>Hello</h1>
<div class="innerGradient"></div>
</div>
I am a tad stumped on this following CSS shenannigan.
I have a text input element and its background is red, and I want to animate a whitewash effect when it becomes focused, and the reverse red-wash effect when it is unfocused.
#keyframes reveal-search {
0% {
background: maroon;
}
20% {
background: linear-gradient(to left, maroon 0%, whitesmoke 40%, whitesmoke 60%, maroon 100%);
}
40% {
background: linear-gradient(to left, maroon 0%, white 30%, whitesmoke 70%, maroon 100%);
}
60% {
background: linear-gradient(to left, maroon 0%, whitesmoke 20%, whitesmoke 80%, maroon 100%);
}
80% {
background: linear-gradient(to left, maroon 0%, whitesmoke 10%, whitesmoke 90%, maroon 100%);
}
100% {
background: whitesmoke;
}
}
input {
border: none;
background: maroon;
}
input:focus {
outline: none;
background: whitesmoke;
animation: reveal-search 0.1s both;
}
<input type="text" />
I have tried playing around with moving animation outside of &:focus, setting setting a separate animation property with backwards in the input, and removing the background colors as I thought they were colliding with the animation.
As it stands, the when this input is focused the is a nice white reveal animation happening from the center. But when it is unfocused, it just goes back to red. I would like the animation to play in reverse, instead.
You don't need JS for this.
You can run the same animation in reverse for the input when it is not in focus.
However, there's a slight hitch as once an animation has been run CSS doesn't run it again - so using the same animation-name it just thinks it's done it.
This snippet copies the animation keyframes reveal but calls it unreveal and gets it run in reverse when the input is not in focus:
#keyframes reveal-search {
0% {
background: maroon;
}
20% {
background: linear-gradient(to left, maroon 0%, whitesmoke 40%, whitesmoke 60%, maroon 100%);
}
40% {
background: linear-gradient(to left, maroon 0%, white 30%, whitesmoke 70%, maroon 100%);
}
60% {
background: linear-gradient(to left, maroon 0%, whitesmoke 20%, whitesmoke 80%, maroon 100%);
}
80% {
background: linear-gradient(to left, maroon 0%, whitesmoke 10%, whitesmoke 90%, maroon 100%);
}
100% {
background: whitesmoke;
}
}
#keyframes unreveal-search {
0% {
background: maroon;
}
20% {
background: linear-gradient(to left, maroon 0%, whitesmoke 40%, whitesmoke 60%, maroon 100%);
}
40% {
background: linear-gradient(to left, maroon 0%, white 30%, whitesmoke 70%, maroon 100%);
}
60% {
background: linear-gradient(to left, maroon 0%, whitesmoke 20%, whitesmoke 80%, maroon 100%);
}
80% {
background: linear-gradient(to left, maroon 0%, whitesmoke 10%, whitesmoke 90%, maroon 100%);
}
100% {
background: whitesmoke;
}
}
input {
border: none;
background: maroon;
animation: unreveal-search 0.1s both;
animation-direction: reverse;
animation-fill-mode: forwards;
}
input:focus {
outline: none;
background: whitesmoke;
animation: reveal-search 0.1s both;
}
<input type="text" />
I am using a custom font (generated through IconMoon) for my project. So far, I have managed to fill the font with a custom patterns (diagnol-left.gif, diagnol-right.gif, blanc.gif) and transition between them. However, the transition is not going gradually as I wish, moreover it jumps from one pattern to another. How can I make it gradually changing?
html
<i class="icon-custom button-home"></i>
css
.button-home {
color: #00D7FF;
-webkit-text-fill-color: transparent;
background: -webkit-linear-gradient(transparent, transparent),
url("/tabsnew/www/img/blanc.gif") repeat;
background: -o-linear-gradient(transparent, transparent);
-webkit-background-clip: text;
-webkit-animation: animation-button 30000ms infinite;
-moz-animation: animation-button 30000ms infinite;
-o-animation: animation-button 30000ms infinite;
animation: animation-button 30000ms infinite;
-webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
animation-delay: 2s;
}
#-webkit-keyframes animation-button {
0% {
background: -webkit-linear-gradient(transparent, transparent),
url("/tabsnew/www/img/blanc.gif") repeat;
}
25% {
background: -webkit-linear-gradient(transparent, transparent),
url("/tabsnew/www/img/diagnol-left.gif") repeat;
}
50% {
background: -webkit-linear-gradient(transparent, transparent),
url("/tabsnew/www/img/diagnol-right.gif") repeat;
}
75% {
background: -webkit-linear-gradient(transparent, transparent),
url("/tabsnew/www/img/blanc.gif") repeat;
}
100% {
background: -webkit-linear-gradient(transparent, transparent),
url("/tabsnew/www/img/blanc.gif") repeat;
}
}
#keyframes animation-button {
0% {
background: -webkit-linear-gradient(transparent, transparent),
url("/tabsnew/www/img/blanc.gif") repeat;
}
25% {
background: -webkit-linear-gradient(transparent, transparent),
url("/tabsnew/www/img/diagnol-left.gif") repeat;
}
50% {
background: -webkit-linear-gradient(transparent, transparent),
url("/tabsnew/www/img/diagnol-right.gif") repeat;
}
75% {
background: -webkit-linear-gradient(transparent, transparent),
url("/tabsnew/www/img/blanc.gif") repeat;
}
100% {
background: -webkit-linear-gradient(transparent, transparent),
url("/tabsnew/www/img/blanc.gif") repeat;
}
}
I want to move my gradient that has multiple colors smoothly but the problem is that the animation is not smooth. It just changes its position at every step.
<style>
.animated {
width: 300px;
height: 300px;
border: 1px solid black;
animation: gra 5s infinite;
animation-direction: reverse;
-webkit-animation: gra 5s infinite;
-webkit-animation-direction: reverse;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
#keyframes gra {
0% {
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(21%, #ff670f), color-stop(56%, #ffffff), color-stop(88%, #0eea57));
background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);
background: linear-gradient(135deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);
}
50% {
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(10%, #ff670f), color-stop(40%, #ffffff), color-stop(60%, #0eea57));
background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);
background: linear-gradient(135deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);
}
100% {
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(5%, #ff670f), color-stop(10%, #ffffff), color-stop(40%, #0eea57));
background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);
background: linear-gradient(135deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);
}
}
</style>
<div class="animated">
<h1>Hello</h1>
</div>
Is it possible to accomplish without using jQuery?
My jsfiddle link is https://jsfiddle.net/bAUK6
Please try this code:
#gradient
{
height:300px;
width:300px;
border:1px solid black;
font-size:30px;
background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00);
background-size: 200% 200%;
-webkit-animation: Animation 5s ease infinite;
-moz-animation: Animation 5s ease infinite;
animation: Animation 5s ease infinite;
}
#-webkit-keyframes Animation {
0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}
}
#-moz-keyframes Animation {
0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}
}
#keyframes Animation {
0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}
}
<html>
<div id="gradient">
Hello
</div>
</html>
Dynamic implementation of Dave's answer:
:root{
--overlay-color-1: #ff0000;
--overlay-color-2: #0000ff;
--anim-duration: 2s;
}
#gradient {
opacity: 0.8;
background: none;
}
#gradient:after,
#gradient:before {
content: '';
display: block;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
#gradient:before {
background: linear-gradient(135deg, var(--overlay-color-2) 0%, var(--overlay-color-1) 100%);
animation: OpacityAnim var(--anim-duration) ease-in-out 0s infinite alternate;
}
#gradient:after {
background: linear-gradient(135deg, var(--overlay-color-1) 0%, var(--overlay-color-2) 100%);
animation: OpacityAnim var(--anim-duration) ease-in-out calc(-1 * var(--anim-duration)) infinite alternate;
}
#keyframes OpacityAnim {
0%{opacity: 1.0}
100%{opacity: 0.0}
}
<div id="gradient"></div>
Using CSS variables it's now a trivial task.
Here is a basic example (hover to see the result)
#property --a{
syntax: '<angle>';
inherits: false;
initial-value: 90deg;
}
#property --l{
syntax: '<percentage>';
inherits: false;
initial-value: 10%;
}
#property --c{
syntax: '<color>';
inherits: false;
initial-value: red;
}
.box {
/* needed for firefox to have a valid output */
--a:80deg;
--l:10%;
--c:red;
/**/
cursor:pointer;
height:200px;
transition:--a 0.5s 0.1s,--l 0.5s,--c 0.8s;
background:linear-gradient(var(--a), var(--c) var(--l),blue,var(--c) calc(100% - var(--l)));
}
.box:hover {
--a:360deg;
--l:40%;
--c:green;
}
<div class="box"></div>
More details here: https://dev.to/afif/we-can-finally-animate-css-gradient-kdk
How about this:
Set the body margin and padding to 0. Set an html rule to 100% height (higher than 100% may be required).
Set the body to the end state for the gradient.
Create an empty div with a background which is the start state for the gradient. Give the empty div 100% height.
Give both the body and the empty div a background-attachment: fixed;
Create a wrapper for your body content.
Set the empty div to position: fixed;
Set the wrapper to position: relative;
Give both a z-index, the wrapper being higher.
Create an animation that will change the opacity of the empty div from 1 to 0 over the desired time. Add animation-fill-mode:forwards; to the div rule so the animation stays where it ends.
It's not as sexy as a real animated gradient shift, but it's as simple as you can get with CSS only and keyframes, I think.
Here is another way. The following has the static gradient containing all phases of the animation, which is then moved inside the outer element. This allows to perform animation smoothly (as the topic suggests), because the only animation here is the element position.
Please note that for the sake of performance the gradient element left unchanged. Although the question was to animate the gradient, moving the background does practically the same thing, while the performance wins!
.animated {
width: 300px;
height: 300px;
overflow: hidden;
position: relative;
border: 1px solid black;
}
.innerGradient {
z-index: -1;
width: 300%;
height: 300%;
position: absolute;
animation: gra 5s infinite;
-webkit-animation: gra 5s infinite;
background: linear-gradient(135deg, #ff670f 0%, #ff670f 20%, #ffffff 50%, #0eea57 80%, #0eea57 100%);
background: -webkit-linear-gradient(135deg, #ff670f 0%, #ff670f 20%, #ffffff 50%, #0eea57 80%, #0eea57 100%);
}
#keyframes gra {
0% { left: -200%; top: -200%; }
50% { left: 0%; top: 0%; }
100% { left: -200%; top: -200%; }
}
<div class="animated">
<h1>Hello</h1>
<div class="innerGradient"></div>
</div>
I have a div tag overlaying an image which is animated by growing in width and increasing in opacity. I simply want a single iteration (which is the default, I know), but for whatever reason, it runs infinitely. Could I get some feedback on how to accomplish a single iteration? Thank you in advance!
markup:
<div class="capback">
</div>
css:
.capback {
background: #000;
opacity:0.7;
filter:alpha(opacity=40);
position: absolute;
height: 17px;
width: 465px;
top: 1px;
left: 1px;
color: #fff;
padding: 5 0 0 10px;
font-size: 12px;
-moz-animation: fullexpand 25s ease-out;
-moz-animation-iteration-count:1;
-webkit-animation: fullexpand 25s ease-out;
-webkit-animation-iteration-count:1;
-o-animation: fullexpand 25s ease-out;
-o-animation-iteration-count:1;
}
#-moz-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:465px; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:465px; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:465px; opacity:0; }
}
#-webkit-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:465px; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:465px; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:465px; opacity:0; }
}
#-o-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:465px; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:465px; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:465px; opacity:0; }
}
as the saying goes, "the problem usually lies between the keyboard and the chair". holds true in this case. :) i was causing my own woes with too many keyframes.