How can I use fixed background-attachment with css3 translate animation instead of changing "left" attribute animation?
I want to use fixed background-attachment here
div
{
width:100px;
height:100px;
background:red;
position:relative;
-webkit-animation: moveToLeft 2s infinite both;
-moz-animation: moveToLeft 2s infinite both;
animation: moveToLeft 2s infinite both;
background-image: url(http://img.gawkerassets.com/img/18as01fkexzecjpg/ku-xlarge.jpg);
background-attachment: fixed;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
#-webkit-keyframes moveToLeft {
to { -webkit-transform: translateX(180%); }
}
#-moz-keyframes moveToLeft {
to { -moz-transform: translateX(180%); }
}
#keyframes moveToLeft {
to { transform: translateX(180%); }
}
http://jsfiddle.net/alyumitskij/9tsBc/3/
like here
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
background-image: url(http://img.gawkerassets.com/img/18as01fkexzecjpg/ku-xlarge.jpg);
background-attachment: fixed;
}
#keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
#-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
http://jsfiddle.net/alyumitskij/6X7mr/1/
Related
I have a simple CSS based loading animation that should iterate with infinite. However, the animation only runs once and stops. I'm surely missing something trivial but can't spot the error.
A related question, to shorten the CSS, can I join all the vendor specific selectors into one block, as in the following example?
#keyframes loading-dots,
#-webkit-keyframes loading-dots,
#-[other vendors...]
{
0%,
100% {
visibility: hidden;
}
50% {
visibility: visible;
}
}
Any help is greatly appreciated.
Here is a snippet:
.loading-dots span {
display: inline-block;
height: 9px;
width: 9px;
background: #abb3b8;
-webkit-animation: loading-dots 0.8s infinite;
-moz-animation: loading-dots 0.8s infinite;
-ms-animation: loading-dots 0.8s infinite;
animation: loading-dots 0.8s infinite;
}
.loading-dots span:nth-child(2) {
visibility: hidden;
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loading-dots span:nth-child(3) {
visibility: hidden;
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-ms-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#keyframes loading-dots {
0%,
100% {
visibility: hidden;
}
50% {
visibility: visible;
}
}
#-webkit-keyframes loading-dots {
0%,
100% {
visibility: hidden;
}
50% {
visibility: visible;
}
}
#-moz-keyframes loading-dots {
0%,
100% {
visibility: hidden;
}
50% {
visibility: visible;
}
}
#-ms-keyframes loading-dots {
0%,
100% {
visibility: hidden;
}
50% {
visibility: visible;
}
}
<div class="loading-dots">
<span></span>
<span></span>
<span></span>
</div>
I suggest using opacity with any visibility animation check the code below with opacity .. because animating visibility or display is not a good idea as they are a 1/0 values that can't be animated
.loading-dots span {
display: inline-block;
opacity:0;
height: 9px;
width: 9px;
background: #abb3b8;
-webkit-animation: loading-dots 0.8s infinite;
-moz-animation: loading-dots 0.8s infinite;
-ms-animation: loading-dots 0.8s infinite;
animation: loading-dots 0.8s infinite;
}
.loading-dots span:nth-child(2) {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loading-dots span:nth-child(3) {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-ms-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#keyframes loading-dots {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes loading-dots {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes loading-dots {
0%{
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes loading-dots {
0% {
opacity:0;
},
100% {
opacity:1;
}
}
<div class="loading-dots">
<span></span>
<span></span>
<span></span>
</div>
Looking at Animista.net I would like to write some custom CSS animations. So I thought I would try by using one of their examples, and then tweaking it for my personal use.
.box {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation: fade-in 1.2s steps(80, end) both;
-moz-animation: fade-in 1.2s steps(80, end) both;
animation: fade-in 1.2s steps(80, end) both;
}
<div class="box"></div>
But I cannot get the animations to work at all.
What am I doing wrong?
Here you are. You must add animation.
#keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
Codepen
You also need to define the #keyframes to make the animation work. See the attached snippet.
.box {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation: fade-in 1.2s steps(80, end) both;
-moz-animation: fade-in 1.2s steps(80, end) both;
animation: fade-in 1.2s steps(80, end) both;
}
#-webkit-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
#-moz-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
#-o-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
<div class="box"></div>
Can you please take a look at this Demo and let me know why the keyframe animation not working>
<div class="showbox"></div>
<style>
.showbox {
height:15px;
width:15px;
background:red;
border-radius: 25px;
-webkit-transition:1s ease-in-out;
-moz-transition:1s ease-in-out;
-o-transition:1s ease-in-out;
transition:1s ease-in-out -webkit-animation-name: pulse;
-webkit-animation-duration: 1000ms;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes pulse {
0% {
-webkit-transform:scale(1);
transform:scale(1);
}
25% {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
50% {
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
75% {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
100% {
-webkit-transform:scale(1);
transform:scale(1);
}
}
</style>
Thanks
Simplest variant http://jsfiddle.net/darLuges/2/
.showbox {
height:15px;
width:15px;
background:red;
border-radius: 25px;
transform-origin:50% 50%;
transform:scale(1);
animation: pulse 0.6s infinite linear alternate;
}
#keyframes pulse {
to {transform:scale(1.3);}
}
<div class="showbox"></div>
(than add back the xBrowser -vendor- prefixes)
Firefox is ignoring the declaration for the first animation (cursorfadein), while showing the animations that handle the moving and fading out just fine. I've tried using units like 0s and 0msCode below.
#-moz-keyframes cursorfadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes cursormover {
0% {
top: 300px;
right: 90px;
}
50%, 60% {
top: 204px;
right: 234px;
}
100% {
top: 300px;
right: 290px;
}
}
#-moz-keyframes cursorhider {
0% { opacity: 1; }
100% { opacity: 0; }
}
.cursor {
position: absolute;
background: url(https://cdn.mediacru.sh/A/AhRlh9cYN5sf.png) no-repeat;
background-size: contain;
display: block;
height: 20px;
width: 20px;
-webkit-animation: cursorfadein 3s ease 0s, cursormover 3s ease-in-out 2s both, cursorhider 1s linear 6s both;
-moz-animation: cursorfadein 3s ease 0s, cursormover 3s ease-in-out 2s both, cursorhider 1s linear 6s both;
animation: cursorfadein 3s ease 0s, cursormovein 3s ease-in-out 2s both, cursorhider 1s linear 6s both;
}
I have the -webkit- and non-prefixed #keyframes as well (included in the Codepen), just wanted to be brief here on SO
Codepen here.
I have a cloud which moves from just inside the screen to off the screen with a CSS3 animation. When the cloud is off the screen, the screen scrolls horizontally which is not ideal. I can hide the scrollbar with CSS, but I'd like to prevent the scroll.
#c-2 {
background:url(clouds.png) no-repeat;
width:161px;
height:94px;
position:absolute;
top:40%;
right:0%;
animation:CloudB 20s 1s infinite alternate ease-in-out;
-moz-animation:CloudB 20s 1s infinite alternate ease-in-out;
-webkit-animation:CloudB 20s 1s infinite alternate ease-in-out;
-o-animation:CloudB 20s 1s infinite alternate ease-in-out;
}
#keyframes CloudB {
0% { right:0%; top:40%; }
100% { right:-10%; top:40%; }
}
#-moz-keyframes CloudB {
0% { right:0%; top:40%; }
100% { right:-10%; top:40%; }
}
#-webkit-keyframes CloudB {
0% { right:0%; top:40%; }
100% { right:-10%; top:40%; }
}
#-o-keyframes CloudB {
0% { right:0%; top:40%; }
100% { right:-10%; top:40%; }
}
http://energycenter.herokuapp.com/
Try this - http://jsfiddle.net/m3af2/
body {
background-color: #99CCE8;
margin: 0;
line-height: 1;
text-rendering: optimizeLegibility;
overflow-x: hidden;
position: relative;
}