I've looked on w3schools and found this snippet of code for animating a transition between 2 colours:
#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;}
}
and
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
In order to animate a transition between 4 images I adapted into this:
#keyframes graphic {
from {img src="Scene1.jpg" alt="Scene1";}
to {img src="Scene2.jpg" alt="Scene2";}
to {img src="Scene3.jpg" alt="Scene3";}
to {img src="Scene4.jpg" alt="Scene4";}
}
.animation {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: graphic;
animation-duration: 20s;
animation-iteration-count: infinite;
}
and used it as a div for this:
<div class="animation">
animation
</div>
However, all this does is place the text "animation" onto the webpage. Am I adapting this incorrectly or is there another method for animating transitions between images?
Maybe try using background-image
.animation {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: graphic;
animation-duration: 20s;
animation-iteration-count: infinite;
background-size: contain;
background-repeat: no-repeat;
}
#keyframes graphic {
0% {background-image: url("https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.all-about-siamese-cats.com%2Fimages%2Ftraditionalseal.jpg&f=1&nofb=1")}
25% {background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.petshopsuk.co.uk%2Fimages%2Fcat%2F390%2Fcats.jpg&f=1&nofb=1")}
50% {background-image: url("https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.all-about-siamese-cats.com%2Fimages%2Ftraditionalseal.jpg&f=1&nofb=1")}
75% {background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.catster.com%2Fwp-content%2Fuploads%2F2015%2F06%2Fcats-love-each-other-imagefile-shutterstock_1446712551.jpg&f=1&nofb=1")}
100% {background-image: url("https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.all-about-siamese-cats.com%2Fimages%2Ftraditionalseal.jpg&f=1&nofb=1")}
}
<div class="animation"> </div>
Related
Originally, just for the logo alone, I used fixed positioning since the divs for each square would not be in the right place otherwise. With a fixed position, they won't go into my inner div box though. The inner and outer div boxes have colour just so I can see them at the moment. Does anyone know of a way to make the position for my divs relative whiel still keeping them in the right position for the animation so they cross over and are symmetrical?
<!DOCTYPE html>
<html>
<head>
<style>
div.outer {
top: 0%;
left: 0%;
margin: 0 auto;
width: 100%;
height: 100%;
position: fixed;
background-color: red;
opacity: 0.5;
}
div.inner {
width: 60%;
height: 60%;
top: 25%;
margin: 0 auto;
position: relative;
background:orange;
}
body {
display: block;
height: 100%;
}
div.a {
width: 200px;
height: 200px;
background-color: blue;
position: relative;
animation-name: raveA;
animation-duration: 2.5s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
div.b {
width: 200px;
height: 200px;
background-color: red;
position: relative;
animation-name: raveB;
animation-duration: 2.5s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
div.c {
width: 200px;
height: 200px;
background-color: green;
position: relative;
animation-name: raveC;
animation-duration: 2.5s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
div.d {
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
animation-name: raveD;
animation-duration: 2.5s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
#keyframes raveA {
0% {background-color:blue; left:0px; top:0px;}
50% {background-color:red; left:230px; top:230px;}
100% {background-color:rgb(240,101,43); left:55px; top:20px; transform:skewX(-10deg);}
}
#keyframes raveB {
0% {background-color:red; left:250px; top:250px;}
50% {background-color:yellow; left:20px; top:20px;}
100% {background-color:rgb(247,189,0); left:230px; top:230px; transform:skewX(-10deg);}
}
#keyframes raveC {
0% {background-color:green; left:0px; top:250px;}
50% {background-color:blue; left:230px; top:20px;}
100% {background-color:rgb(0,174,233); left:20px; top:230px; transform:skewX(-10deg);}
}
#keyframes raveD {
0% {background-color:yellow; left:250px; top:0px;}
50% {background-color:green; left:20px; top:230px;}
100% {background-color:rgb(140,189,0); left:265px; top:20px; transform:skewX(-10deg);}
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
</div>
</body>
</html>
This question already has an answer here:
left-right movement.. css only very generic
(1 answer)
Closed 2 years ago.
I am animating left position of an absolutely positioned child div within its parent div. The animation though does work but when child div reaches at 50% (50% {left:100%;}, it goes out of its parent's boundary.
A.) Why does it happen only for left: 100% and not for 0%?
B.) How to keep child moving within parent - not going out of parent on right hand side?
Here's my code:
#parent {
border:1px solid red;
width:500px;
height:200px;
margin:100px auto;
position:relative;
}
/* The element to apply the animation to */
#child {
width:100px;
height:100px;
border:1px solid blue;
position:absolute;
-webkit-animation:animatedPos 20s linear infinite;
-o-animation:animatedPos 20s linear infinite;
-moz-animation:animatedPos 20s linear infinite;
animation:animatedPos 20s linear infinite;
}
/* The animation code */
#-webkit-keyframes animatedPos {
0% {left:0%;}
50% {left:100%;}
100% {left:0%;}
}
#-o-keyframes animatedPos {
0% {left:0%;}
50% {left:100%;}
100% {left:0%;}
}
#-moz-keyframes animatedPos {
0% {left:0%;}
50% {left:100%;}
100% {left:0%;}
}
#keyframes animatedPos {
0% {left:0%;}
50% {left:100%;}
100% {left:0%;}
}
<div id="parent">
<div id="child"></div>
</div>
Change
#keyframes animatedPos {
0% {left:0%;}
50% {left:100%;}
100% {left:0%;}
}
to
*{
box-sizing:border-box;
}
#keyframes animatedPos{
0%{
left:0;
}
50%{
left:calc(100% - 100px);
}
100%{
left:0;
}
}
#parent {
border:1px solid red;
width:500px;
height:200px;
margin:100px auto;
position:relative;
}
#uncle {
border:0px solid silver;
width:400px;
height:200px;
margin:0px auto;
position:absolute;
}
/* The element to apply the animation to */
#child {
width:100px;
height:100px;
border:1px solid blue;
position:absolute;
-webkit-animation:animatedPos 20s linear infinite;
-o-animation:animatedPos 20s linear infinite;
-moz-animation:animatedPos 20s linear infinite;
animation:animatedPos 20s linear infinite;
}
/* The animation code */
#-webkit-keyframes animatedPos {
0% {left:0%;}
50% {right:100%;}
100% {left:0%;}
}
#-o-keyframes animatedPos {
0% {left:0%;}
50% {left:100%;}
100% {left:0%;}
}
#-moz-keyframes animatedPos {
0% {left:0%;}
50% {left:100%;}
100% {left:0%;}
}
#keyframes animatedPos {
0% {left:0%;}
50% {left:100%;}
100% {left:0%;}
}
<div id="parent">
<div id="uncle">
<div id="child"></div>
</div>
</div>
This is a workaround adding other Div(uncle) subtracting the animation Width.
The issue is due to the animation using the axis to move taking only one point in consideration, not the animation Width.
Should be cross-browser.
You should consider the width of the child and reduce it from 50%.
You can set 50% as below. 80% is calculated using width given for parent and child
((500px-100px)/500px)
#keyframes animatedPos {
0% {
left: 0%;
}
50% {
left: 80%;
}
100% {
left: 0%;
}
}
I want to keep left side of the box fixed, and increase its width with time so that the right hand side moves horizontally.
I wrote below code. You can try the animation at below link
https://www.w3schools.com/code/tryit.asp?filename=FTCPP2062CMB
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}
/* Safari 4.0 - 8.0 */
#-webkit-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;}
}
/* Standard syntax */
#keyframes example {
0% {background-color:red; left:0px; top:0px; transform: scale(0.1,1);}
25% {background-color:yellow; left:0px; top:0px; scale(0.1,1);}
50% {background-color:blue; left:0px; top:0px; scale(0.1,1);}
75% {background-color:green; left:0px; top:0px; scale(0.1,1);}
100% {background-color:red; left:0px; top:0px; scale(0.1,1);}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
But it is keeping the centre of square as fixed and moving both sides. How do I keep one side fixed, and only move another horizontally?
You can just animate the width instead of using transform scale.
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}
#keyframes example {
0% {background-color:red; width: 0;}
25% {background-color:yellow;}
50% {background-color:blue;}
75% {background-color:green;}
100% {background-color:red; width: 100px;}
}
<div></div>
You can use transform-origin to achieve this (see MDN documentation).
The transform-origin rule allows you to specify the point of reference (or origin) that a CSS transformation is applied from.
In your case, the key thing is that it your transform origin is relative to the left-hand-side of your <div>, which is achieved by setting the first coordinate of transform-origin to 0% as shown below at both stages of the animation:
div {
width: 100px;
height: 100px;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
animation-timing-function: linear; /* Add this */
}
#keyframes example {
0% {
background-color: red;
left: 0px;
top: 0px;
transform-origin: 0% 0%; /* Add this */
transform: scale(0.1,1);
}
100% {
background-color: yellow;
left: 0px;
top: 0px;
transform-origin: 0% 0%; /* Add this */
transform: scale(1,1);
}
}
I was wondering how I could make images in my website span the full width of my wrapper section of my website. Bare in mind this wrapper is 85% of the entire body of the site.
Here is the HTML for the images in question:
<div id="index_banner">
<img class="bottom" src="images/SPAWN IMAGE.png" alt="INDEX BANNER">
<img class="top" src="images/SURVIVAL IMAGE - GAMEMODES.png" alt="INDEX BANNER 2">
</div>
Here is the CSS for the images on that page:
#index_banner {height: 360px;
position: relative;}
#index_banner img {position: absolute;
animation: cf4FadeInOut 15s;
-webkit-animation: cf4FadeInOut 15s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;}
#index_banner img:nth-child(odd) {-webkit-animation-delay: -8s;
animation-delay: 8s;
animation-timing-function:ease-in-out;}
#-webkit-keyframes cf4FadeInOut {
0% {
opacity:0;
}
30% {
opacity:0;
}
40%{
opacity:1;
}
75%{
opacity:1;
}
85%{
opacity:1;
}
100% {
opacity:0;
}
}
#keyframes cf4FadeInOut {
0% {
opacity:0;
}
30% {
opacity:0;
}
40%{
opacity:1;
}
75%{
opacity:1;
}
85%{
opacity:1;
}
100% {
opacity:0;
}
}
I think this fiddle does what you're looking for:
#index_banner {height: 360px;
position: relative;
width: 85%;} <-- added this
#index_banner img {position: absolute;
width: 100%; <-- and this
animation: cf4FadeInOut 15s;
-webkit-animation:
.................
.................
With this, the index banner takes up 85% of the page width, and the images inside take up 100% of the index banner width.
Ahh I figured it out:
Adding this to the images in the HTML:
height="360"
And adding this to the CSS IMG div:
width:100%;
Adding this produces the desired result of:
So I'm making a preloader animation which will be a 4 divs with background images crossfading. I'm wanting them nicely crossfaded at 0.6 seconds each but I'm having no luck. They keep overlapping each other too much and it's just a mess. I feel I just need the right percentage or something.
.start_loader .iconfader {
position:absolute;
width: 200px;
height: 200px;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
-webkit-animation-name: fade;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 5s;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 5s;
}
#load-icon1 {
background: url(http://mydomain.com/loader-01.png) no-repeat center center;
background-size: 200px 200px;
}
#load-icon2 {
-webkit-animation-delay: -3s;
background: url(http://mydomain.com/loader-02.png) no-repeat center center;
background-size: 200px 200px;
}
#load-icon3 {
-webkit-animation-delay: -2s;
background: url(http://mydomain.com/loader-03.png) no-repeat center center;
background-size: 200px 200px;
}
#load-icon4 {
-webkit-animation-delay: -1s;
background: url(http://mydomain.com/loader-03.png) no-repeat center center;
background-size: 200px 200px;
}
#-webkit-keyframes fade {
0% {opacity: 0;}
25% {opacity: 1;}
33% {opacity: 1;}
53% {opacity: 0;}
100% {opacity: 0;}
}
#keyframes fade {
0% {opacity: 0;}
20% {opacity: 1;}
33% {opacity: 1;}
53% {opacity: 0;}
100% {opacity: 0;}
}
I have done this on Codepen. Check this.
No need 4 divs for this. we can do this on single div with CSS3
http://cdpn.io/rFpmx
CODE
<div class="loader anim-1"></div>
<div class="loader anim-2"></div>
CSS
.loader {
height: 80px;
width: 80px;
position: relative;
margin: 100px auto;
}
.loader:after {
content: "";
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
display: block;
height: 80px;
width: 80px;
}
.loader.anim-1:after {
-webkit-animation: fader 2.4s linear infinite;
}
.loader.anim-2:after {
-webkit-animation: fader2 2.4s linear infinite;
}
#-webkit-keyframes fader {
0%, 20%, 100% {
background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/3/000/01f/210/0fedb27.jpg);
}
25%, 45% {
background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/4/005/025/0d0/3ec916f.jpg);
}
50%, 70% {
background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/4/000/143/350/1ca561e.jpg);
}
75%, 95% {
background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/8/000/2cb/256/2f5ed8e.jpg);
}
}
#-webkit-keyframes fader2 {
0%, 100% {
background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/3/000/01f/210/0fedb27.jpg);
}
25% {
background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/4/005/025/0d0/3ec916f.jpg);
}
50% {
background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/4/000/143/350/1ca561e.jpg);
}
75% {
background-image: url(http://m.c.lnkd.licdn.com/mpr/mpr/shrink_80_80/p/8/000/2cb/256/2f5ed8e.jpg);
}
}