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;
}
Related
it works fine on desktop but on mobile im getting the static state instead of the fading in and out.
I put the code here...
https://codepen.io/anon/pen/jvKZGW
#keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-o-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-moz-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-webkit-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
.loading {
-webkit-animation: flickerAnimation 1s infinite;
-moz-animation: flickerAnimation 1s infinite;
-o-animation: flickerAnimation 1s infinite;
animation: flickerAnimation 1s infinite;
background: #215c87;
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
top: 10px;
right: 10px;
}
I am trying to show or hide the title of sidepanel while collapsing it to width:50%
I am using display: block to display:none;
Somehow I am not able to use the animation on it
Here is the code I am using
.fade-in {
animation: fade-in 0.5s ease-in-out both;
}
.fade-out {
animation: fade-out 0.6s ease-in-out both;
}
#keyframes fade-in {
0% {
opacity: 1;
display: block;
}
100% {
opacity: 0;
display: none;
}
}
#keyframes fade-out {
0% {
opacity: 0;
display: none;
}
100% {
opacity: 1;
display: block;
}
}
Any idea why display is not working
.fade-in {
animation: fade-in 0.5s ease-in-out both;
background:black;
height:200px;
width:200px;
margin-bottom:10px;
}
.fade-out {
animation: fade-out 0.6s ease-in-out both;
background:red;
height:200px;
width:200px;
}
#keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade-out {
0% {
opacity: 1;
display: none;
}
100% {
opacity: 0;
}
}
<div class="fade-in"></div>
<div class="fade-out"></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>
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/
The following code resets the animation to the first frame and repeats. For some reason animation-fill-mode:forwards; is not working.
I'm not sure if it has to do with the pixels or the top margins.
Here is the link to my code. http://jsfiddle.net/HGHyQ/
HTML
<div id="wrapper_founded">
<div id="date_anim">
<span id="first_num">1 2</span>
<span id="second_num">6 7 8 9 0</span>
<span id="third_num">1 2 3 4 5 6 7 1</span>
<span id="fourth_num">4 5 6 7 8 9 0</span>
</div>
</div>
CSS
#wrapper_founded {
position:relative;
width:100%;
float:left;
}
#wrapper_founded h3 {
padding:0 60px;
}
#wrapper_founded #date_anim {
position: absolute;
overflow: hidden;
height: 62px;
width: 180px;
padding: 0;
left: 50%;
margin-left: -90px;
margin-top: 60px;
}
#wrapper_founded #date_anim span {
position:relative;
width:45px;
top:-6px;
line-height:.9;
background:transparent;
float:left;
font-family: 'Maven Pro', sans-serif;
font-size:70px;
color: #3D4D57;
text-shadow: 0px 2px 2px #555;
}
#wrapper_founded #date_anim span#first_num {
-moz-animation:first_num 6s infinite ease-in-out;
-webkit-animation:first_num 6s infinite ease-in-out;
animation:first_num 6s infinite ease-in-out;
}
#-moz-keyframes first_num {
60% {
top:-61px;
}
80% {
top:-61px;
}
95% {
top:0;
}
100% {
top:0;
}
}
#-webkit-keyframes first_num {
60% {
top:-61px;
}
80% {
top:-61px;
}
95% {
top:0;
}
100% {
top:0;
}
}
#keyframes first_num {
60% {
top:-61px;
}
80% {
top:-61px;
}
95% {
top:0;
}
100% {
top:0;
}
}
#wrapper_founded #date_anim span#second_num {
-moz-animation:second_num 6s infinite ease-in-out;
-webkit-animation:second_num 6s infinite ease-in-out;
animation:second_num 6s infinite ease-in-out;
}
#-moz-keyframes second_num {
60% {
top:-250px;
}
80% {
top:-250px;
}
95% {
top:0;
}
100% {
top:0;
}
}
#-webkit-keyframes second_num {
60% {
top:-250px;
}
80% {
top:-250px;
}
95% {
top:0;
}
100% {
top:0;
}
}
#keyframes second_num {
60% {
top:-250px;
}
80% {
top:-250px;
}
95% {
top:0;
}
100% {
top:0;
}
}
#wrapper_founded #date_anim span#third_num {
top:-381px;
-moz-animation:third_num 6s infinite ease-in-out;
-webkit-animation:third_num 6s infinite ease-in-out;
animation:third_num 6s infinite ease-in-out;
}
#-moz-keyframes third_num {
60% {
top:3px;
}
80% {
top:3px;
}
95% {
top:-381px;
}
100% {
top:-381px;
}
}
#-webkit-keyframes third_num {
60% {
top:3px;
}
80% {
top:3px;
}
95% {
top:-381px;
}
100% {
top:-381px;
}
}
#keyframes third_num {
60% {
top:3px;
}
85% {
top:3px;
}
95% {
top:-381px;
}
100% {
top:-381px;
}
}
#wrapper_founded #date_anim span#fourth_num {
-moz-animation:fourth_num 6s infinite ease-in-out;
-webkit-animation:fourth_num 6s infinite ease-in-out;
animation:fourth_num 6s infinite ease-in-out;
}
#-moz-keyframes fourth_num {
60% {
top:-377px;
}
80% {
top:-377px;
}
95% {
top:0;
}
100% {
top:0;
}
}
#-webkit-keyframes fourth_num {
60% {
top:-377px;
}
80% {
top:-377px;
}
95% {
top:0;
}
100% {
top:0;
}
}
#keyframes fourth_num {
60% {
top:-377px;
}
80% {
top:-377px;
}
95% {
top:0;
}
100% {
top:0;
}
}
#wrapper_founded .border_line {
height:1px;
position:relative;
text-align:center;
background-color:#000;
width:143px;
display:block;
margin:0 auto 35px;
}
The main issue is that the keyframes sections need to run from 0%-100% instead of 60%-100%. I have found that using the from and to blocks instead of the percentages to be the easiest way of getting a smooth and consistent animation.
In addition, I removed the infinite repeat and re-added the three flavors of animation-fill-mode:forwards. (Tested in Chrome and IE)
Fiddle: http://jsfiddle.net/hzNad/
#wrapper_founded {
position:relative;
width:100%;
float:left;
}
#wrapper_founded h3 {
padding:0 60px;
}
#wrapper_founded #date_anim {
position: absolute;
overflow: hidden;
height: 62px;
width: 180px;
padding: 0;
left: 50%;
margin-left: -90px;
margin-top: 60px;
}
#wrapper_founded #date_anim span {
position:relative;
width:45px;
top:-6px;
line-height:.9;
background:transparent;
float:left;
font-family: 'Maven Pro', sans-serif;
font-size:70px;
color: #3D4D57;
text-shadow: 0px 2px 2px #555;
}
#wrapper_founded #date_anim span#first_num {
-moz-animation:first_num 6s ease-in-out;
-moz-animation-fill-mode:forwards;
-webkit-animation:first_num 6s ease-in-out;
-webkit-animation-fill-mode:forwards;
animation:first_num 6s ease-in-out;
animation-fill-mode:forwards;
}
#-moz-keyframes first_num {
from {top: 0px;}
to {top: -61px;}
}
#-webkit-keyframes first_num {
from {top: 0px;}
to {top: -61px;}
}
#keyframes first_num {
from {top: 0px;}
to {top: -61px;}
}
#wrapper_founded #date_anim span#second_num {
-moz-animation:second_num 6s ease-in-out;
-moz-animation-fill-mode:forwards;
-webkit-animation:second_num 6s ease-in-out;
-webkit-animation-fill-mode:forwards;
animation:second_num 6s ease-in-out;
animation-fill-mode:forwards;
}
#-moz-keyframes second_num {
from {top: 0px;}
to {top: -250px;}
}
#-webkit-keyframes second_num {
from {top: 0px;}
to {top: -250px;}
}
#keyframes second_num {
from {top: 0px;}
to {top: -250px;}
}
#wrapper_founded #date_anim span#third_num {
-moz-animation:third_num 6s ease-in-out;
-moz-animation-fill-mode:forwards;
-webkit-animation:third_num 6s ease-in-out;
-webkit-animation-fill-mode:forwards;
animation:third_num 6s ease-in-out;
animation-fill-mode:forwards;
}
#-moz-keyframes third_num {
from {top: -381px;}
to {top: 0px;}
}
#-webkit-keyframes third_num {
from {top: -381px;}
to {top: 0px;}
}
#keyframes third_num {
from {top: -381px;}
to {top: 0px;}
}
#wrapper_founded #date_anim span#fourth_num {
-moz-animation:fourth_num 6s ease-in-out;
-moz-animation-fill-mode:forwards;
-webkit-animation:fourth_num 6s ease-in-out;
-webkit-animation-fill-mode:forwards;
animation:fourth_num 6s ease-in-out;
animation-fill-mode:forwards;
}
#-moz-keyframes fourth_num {
from {top: 0px;}
to {top: -377px;}
}
#-webkit-keyframes fourth_num {
from {top: 0px;}
to {top: -377px;}
}
#keyframes fourth_num {
from {top: 0px;}
to {top: -377px;}
}
#wrapper_founded .border_line {
height:1px;
position:relative;
text-align:center;
background-color:#000;
width:140;
display:block;
margin:0 auto 35px;
}