Here is the CSS:
body {
background-image: url(SMback.jpg);
color: #ecf2f9;
text-align: center;
-webkit-animation: bgscroll 20s infinite linear;
-moz-animation: bgscroll 20s infinite linear;
-ms-animation: bgscroll 20s infinite linear;
-o-animation: bgscroll 20s infinite linear;
}
I have no divs set up, just a simple HTML skeleton. The image is appearing without the scroll. What can I be doing better here?
Did you remember to define your keyframes for the bgscroll animation?
#keyframes bgscroll
{
from {background-position:0 0;}
to {background-position:0 200px;}
}
Here's a fiddle to help you out: http://jsfiddle.net/JC9e8/
Related
I want remove zoom in zoom out effect from mobile view but not getting solution,
.whats_next_float .lets_go_wrapper img.logo_img {
animation: zoominout 3s infinite;
}
animation: zoominout 3s infinite;
animation-duration: 3s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-name: zoominout;
}
Anyone have idea then let me know.
You can set the CSS animation property to none.
#media only screen and (max-width: 600px) {
.whats_next_float .lets_go_wrapper img.logo_img {
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
-ms-animation: none;
animation: none;
}
}
Is there a way to force animated elements to stay positioned on top of another image?
PROBLEM:
When you resize the browser all of the Animated Elements slide Horizontally and/or Vertically.
Notice the pink square div [as well as the others] move when I resize the screen, I want it to stay in the same place and NOT MOVE.
I've tried to use absolute position on the div, but that doesn't stop
them from moving around on resize. What can I do to keep the elements in a certain spot on the picture?
Please use my fiddle to demonstrate your solution
HTML:
<center>
<div id="wrapper">
<img class="buildingtotal img-responsive" src="http://www.penguins-world.com/wp-content/uploads/emperor_penguin.jpg" >
<div id="animation">
<div class="bubble toprow"> </div>
<div class="bubble toprow"> </div>
<div class="bubble toprow"> </div>
<div class="bubble toprow"> </div>
<div class="bubble bottomrow"> </div>
<div class="bubble bottomrow"> </div>
<div class="bubble bottomrow"> </div>
<div class="bubble bottomrow"> </div>
</div>
<img class="buildingsolo" src="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/Puffins.jpg" >
</div>
</center>
CSS:
.toprow{top:0;}
.bottomrow{top:0; margin-top:15%;}
.bubble {
height: 100px;
width: 100px;
position:absolute;
opacity:0;
}
#animation div:nth-of-type(1) {
-webkit-animation: fadein 6s ease-in-out -8s infinite alternate;
-moz-animation: fadein 6s ease-in-out -8s infinite alternate;
animation:fadein 6s ease-in-out -8s infinite alternate;
}
#animation div:nth-of-type(2) {
-webkit-animation: fadein 6s ease-in-out 8s infinite alternate;
-moz-animation: fadein 6s ease-in-out 8s infinite alternate;
animation: fadein 6s ease-in-out 8s infinite alternate;
}
#animation div:nth-of-type(3) {
-webkit-animation: fadein 6s ease-in-out 16s infinite alternate;
-moz-animation: fadein 6s ease-in-out 16s infinite alternate;
animation: fadein 6s ease-in-out 16s infinite alternate;
}
#animation div:nth-of-type(4) {
-webkit-animation: fadein 6s ease-in-out 24s infinite alternate;
-moz-animation: fadein 6s ease-in-out 24s infinite alternate;
animation:fadein 6s ease-in-out 24s infinite alternate;
}
#animation div:nth-of-type(5) {
-webkit-animation: fadein 6s ease-in-out -16s infinite alternate;
-moz-animation: fadein 6s ease-in-out -16s infinite alternate;
animation: fadein 6s ease-in-out -16s infinite alternate;
}
#animation div:nth-of-type(6) {
-webkit-animation: fadein 6s ease-in-out 40s infinite alternate;
-moz-animation: fadein 6s ease-in-out 40s infinite alternate;
animation: fadein 6s ease-in-out 40s infinite alternate;
}
#animation div:nth-of-type(7) {
-webkit-animation: fadein 6s ease-in-out -24s infinite alternate;
-moz-animation: fadein 6s ease-in-out -24s infinite alternate;
animation:fadein 6s ease-in-out -24s infinite alternate;
}
#animation div:nth-of-type(8) {
-webkit-animation: fadein 6s ease-in-out 32s infinite alternate;
-moz-animation: fadein 6s ease-in-out 32s infinite alternate;
animation: fadein 6s ease-in-out 32s infinite alternate;
}
#-webkit-keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
76% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
76% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
76% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.toprow{top:25%; }
.bottomrow{top:0%; }
.bubble:nth-child(1)
{
background: #ff0; left:10%;
}
.bubble:nth-child(2)
{
background: #333; left:30%;
}
.bubble:nth-child(3)
{
background: #f90; left:60%;
}
.bubble:nth-child(4)
{
background: #e43; left:80%;
}
.bubble:nth-child(5)
{
background: #e38; left:10%;
}
.bubble:nth-child(6)
{
background: #338;left:30%;
}
.bubble:nth-child(7)
{
background: #fdd; left:60%;
}
.bubble:nth-child(8)
{
background: #53d; left:80%;
}
}
#media(max-width:630px)
{
#animation {display:none!important;}
.buildingsolo {display:none !important;}
.buildingtotal {display:block !important; top:0!important;}
}
Wrap each image in a div with position:relative;
<div style="position:relative;">
<div style="position:absolute;"><!--box goes here--></div>
<img .../>
</div>
You can also try:
#wrapper { position:relative; display:inline-block; margin:0 auto; }
EDIT
Make sure the wrapper is the same width as the image, else it will not work:
<div id="wrapper" style="display:inline-block;">
I using a vertical sprite sheet in an animation with #keyframe.
I just can't get it to work correctly.
body{
background: brown;
}
.hi {
width: 117px;
height: 180px;
background-image: url("http://i.imgur.com/DxApxaV.png");
-webkit-animation: play .9s steps(8) infinite;
-moz-animation: play .9s steps(8) infinite;
-ms-animation: play .9s steps(8) infinite;
-o-animation: play .9s steps(8) infinite;
animation: play .9s steps(8) infinite;
}
#keyframes play {
from { background-position:0px; }
to { background-position:0px 1080px; }
}
<div class="hi"></div>
I tried using #keyframe with background-position-y axis to no avail.
It should be animation at 1 frame.
You just needed to change the steps to 6.
Basically speaking, steps is the number of sprites you are wanting to show over X time. So in this case, you only have 6, not 9.
I also changed it to use background-position.y.. note that having background-position: 0 0; is also good practice for when you come across more complex, grid sprite sheets.
body{
background: brown;
}
.hi {
width: 117px;
height: 180px;
background-image: url("http://i.imgur.com/DxApxaV.png");
background-position: 0 0;
-webkit-animation: play .9s steps(6) infinite;
-moz-animation: play .9s steps(6) infinite;
-ms-animation: play .9s steps(6) infinite;
-o-animation: play .9s steps(6) infinite;
animation: play .9s steps(6) infinite;
}
#keyframes play {
from { background-position-y:0px; }
to { background-position-y:1080px; }
}
<div class="hi"></div>
I am working with css animations and I have a series of animations with different css tags. I start at #water then go to other animations then I want to go back to #water with a different animation. This is my code:
#water {
position: relative;
left: 48px;
z-index: 1;
opacity: 0;
width: 197px;
-webkit-animation: squeez 2s 1s 1 forwards;
-moz-animation: squeez 2s 1s 1 forwards;
-o-animation: squeez 2s 1s 1 forwards;
-webkit-animation: fadeOut 10s 10s 1 forwards;
-moz-animation: fadeOut 10s 10s 1 forwards;
-o-animation: fadeOut 10s 10s 1 forwards;
}
It does not work how I want it to. The code is disregarding the first animation "squeez" and only doing the animation "fadeOut" which messes everything up. Any ideas on how to make this work?
You can comma-separate your animations, so you could do:
-webkit-animation: squeez 2s 1s 1 forwards, fadeOut 10s 10s 1 forwards;
-moz-animation: squeez 2s 1s 1 forwards, fadeOut 10s 10s 1 forwards;
-o-animation: squeez 2s 1s 1 forwards, fadeOut 10s 10s 1 forwards;
animation: squeez 2s 1s 1 forwards, fadeOut 10s 10s 1 forwards;
div {
-webkit-animation: squeez 2s 1s forwards, fadeOut 10s 5s forwards;
animation: squeez 2s 1s forwards, fadeOut 10s 5s forwards;
height: 100px;
width: 100px;
background: #F00;
}
#-webkit-keyframes squeez {
from {
width: 100px;
}
to {
width: 20px;
}
}
#-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0.5;
}
}
#keyframes squeez {
from {
width: 100px;
}
to {
width: 20px;
}
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0.5;
}
}
<div>
</div>
I am working on a website (early stages) and I'm having severe difficulties applying a background crossfade in the white-background area (I would like to have a few images auto-rotating on the background, completely filling it).
As per the HTML code, I should be fine working with class .main-container in the CSS however, this changes nothing...
I would sincerely appreciate your help, I'm self-taught in HTML+CSS and I just need guidance for the right steps to take.
What would you recommend?
Many thanks in advance!
(update)
I decided to go for the Tympanus.net solution.
Which has been badly implemented to http://www.marcocarlo.com/mimosa/index.html
Here's the CSS code:
.cb-slideshow,
.cb-slideshow:after {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(images/pattern.png) repeat top left;
background-size:cover;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 18s linear infinite 0s;
-moz-animation: titleAnimation 18s linear infinite 0s;
-o-animation: titleAnimation 18s linear infinite 0s;
-ms-animation: titleAnimation 18s linear infinite 0s;
animation: titleAnimation 18s linear infinite 0s;
}
What can I do so it is on display in the white background area (fully covering it?)
Many thanks in advance!
You can try looking for some existing guides. Or maybe look for some existing image sliders with crossfade transitions. If you are willing to write your own crossfade though, you can use background-size: cover to fill entire areas (example)