css animation How to achieve changing width? - html

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);
}
}

Related

How to animate a transition between 4 images in CSS

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>

Absolute positioned animated child div goes out of its parent's boundary, how to fix it? [duplicate]

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%;
}
}

css3 animation help needed why doesn't this animate?

I have a webpage where I am trying to animate a picture of a mouse hovering over the page and moving around. But I cant get the stupid thing to work, and it doesnt seem to be throwing up any immediate errors.
code here:
Can someone point me in the right direction? What is wrong with this css? Why isnt it animating the image?

Your code does not specify any dimensions for the div so it has no size for the background to show through.
Also, you do not need to repeat the background-image declaration on every line of the keyframe definition.
div {
background-image: url('http://nanocluster.umeche.maine.edu/mouse.png');
position: relative;
-webkit-animation: myfirst 5s;
/* Chrome, Safari, Opera */
animation: myfirst 5s;
height: 20px;
width: 20px;
background-repeat: no-repeat;
}
#keyframes myfirst {
0% {
left:0px;
top:0px;
}
25% {
left:200px;
top:0px;
}
50% {
left:200px;
top:200px;
}
75% {
left:0px;
top:200px;
}
100% {
left:0px;
top:0px;
}
}
#-webkit-keyframes myfirst {
0% {
left:0px;
top:0px;
}
25% {
left:200px;
top:0px;
}
50% {
left:200px;
top:200px;
}
75% {
left:0px;
top:200px;
}
100% {
left:0px;
top:0px;
}
}
<div></div>

How to move an image from one position to another with CSS?

I am relatively a newbie in the field of CSS. I have seen the #KEYFRAME element for displaying an animation that moves from one side to another. But I was just wondering how is it possible to move an image(in terms of an animation) that moves from one side to another as the page loads?
All answers are appreciated in advance
Thanks
div
{
width:100px;
height:100px;
background:red;
position:relative;
-webkit-animation:myfirst 5s; /* Chrome, Safari, Opera */
animation:myfirst 5s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
/* Standard syntax */
#keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

Please check the following fiddle for a back and forth image animation http://jsfiddle.net/jHHnN/ In the html apply the class "imganim" to the image tag and add the below CSS
.imganim
{
width:100px;
height:100px;
position:relative;
-webkit-animation:myfirst 5s infinite; /* Chrome, Safari, Opera */
animation:myfirst 5s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst
{
0% { left:0px; top:0px;-webkit-transform:rotate(0deg)}
50% {left:100%; margin-left:-100px;-webkit-transform:rotate(360deg)}
100% {left:0px; top:0px;-webkit-transform:rotate(0deg)}
}
/* Standard syntax */
#keyframes myfirst
{
0% { left:0px; top:0px;transform:rotate(0deg)}
50% {left:100%; margin-left:-100px;transform:rotate(360deg)}
100% {left:0px; top:0px;transform:rotate(0deg)}
}

You can use transform css3 property
see this example : http://jsfiddle.net/R65pL/
<span>
<img src="https://pbs.twimg.com/profile_images/1134660580/Puerco_Potter.jpg" alt="">
</span>
span{
width: 100%;
padding: 30px;
display inline-block;
}
img{
-webkit-transition: all .4s;
-moz-transition: all .4s;
-ms-transition: all .4se;
-o-transition: all .4s;
transition: all .4s;
}
img:hover{
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-ms-transform: translateX(20px);
-o-transform: translateX(20px);
transform: translateX(20px);
}
see more in : http://www.w3schools.com/css/css3_transitions.asp

clock Here ho read a complete guide about css animations.

Animate div from top to middle of page only with Css without jquery or java script

i have to show text effects on page load of website i.e to Animate div from top to middle of page only with Css without jquery or java script.
my div css
#body_welcome_content{ width:450px; margin: 205px auto 0; font-size:48px; font-family: 'Playball', cursive; text-align:center; color:#FFF; margin-top:35px; text-shadow: 0px 1px 0px #000;
}
help me out as new to CSS. also make sure for inter browser compatibility so that it works on all browsers.[Without jquery]
Thanks in advance

You can simply do that using #keyframes
Demo
div {
width: 300px;
height: 300px;
background: red;
animation: centerme 2s;
-webkit-animation: centerme 2s;
position: absolute;
z-index: 999; /* To ensure that box is always on the top */
animation-fill-mode: forwards; /* So that box doesn't move back to default place*/
-webkit-animation-fill-mode: forwards;
}
#keyframes centerme {
0% {left: 0; top: 0;}
100% {left: 50%;top: 50%;margin-top: -150px;margin-left: -150px;}
/* Left and Top are 50% with margins which are half of width and height */
}
#-webkit-keyframes centerme {
0% {left: 0;}
100% {left: 50%;margin-left: -150px;}
}