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.
Related
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 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>
On my little testing html page, I have 4 elements. These elements play a CSS animation when hovered over, but I would like the animation to go reverse when the user stops hovering over them.
-webkit-animation-direction:alternate;
didn't work. My current code is as follows:
<style>
div:hover{
-webkit-animation: animationFrames ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 0% 0%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-webkit-animation-direction:alternate;
}
#-webkit-keyframes animationFrames {
0% {
opacity:1;
-webkit-transform: rotate(0deg) scaleX(1) scaleY(1) ;
}
20% {
-webkit-transform: rotate(60deg) ;
}
40% {
-webkit-transform: rotate(40deg) ;
}
60% {
-webkit-transform: rotate(54deg) ;
}
80% {
-webkit-transform: rotate(42deg) ;
}
100% {
opacity:1;
-webkit-transform: rotate(46deg) scaleX(1) scaleY(1) ;
}
}
.testje1
{
background: black;
width:48px;
height:20px;
position:absolute;
left:200px;
top:200px;
}
.testje2
{
background: black;
width:48px;
height:20px;
position:absolute;
left:300px;
top:200px;
}
.testje3
{
background: black;
width:48px;
height:20px;
position:absolute;
left:400px;
top:200px;
}
.testje4
{
background: black;
width:48px;
height:20px;
position:absolute;
left:500px;
top:200px;
}
p
{
position:absolute;
top:-14;
left:2;
color:white;
}
</style>
<a href="http://www.redrumbureau.com" target="_blank" >
<div class="testje1"><p>home</p></div>
</a>
<a href="http://www.redrumbureau.com/work" target="_blank">
<div class="testje2"><p>home</p></div>
</a>
<a href="http://www.redrumbureau.com/clients" target="_blank">
<div class="testje3"><p>clients</p></div>
</a>
<a href="http://www.redrumbureau.com/about" target="_blank">
<div class="testje4"><p>about</p></div>
</a>
All help greatly appreciated!
Use reverse to make the animation go "backwards":
-webkit-animation-direction:reverse;
Here's a nice detailed tutorial on keyframes by CSS tricks if you'd like to learn more about the options available to you.
I try to rotate :before element but it won't rotate. Please, tell me, what I'm doing wrong.
http://jsfiddle.net/holden321/h7eEB/
HTML:
<div>hello</div>
CSS:
div {
height:25px;
line-height:25px;
padding-left:35px;
position:relative;
}
div:before {
content:"";
position:absolute;
left:0;top:0;
height:25px;
width:25px;
background:url(http://lorempixel.com/20/20/) no-repeat center;
-webkit-transform:rotate(0deg);
-webkit-animation-iteration-count:infinite;
-webkit-animation: rotate 2s;
}
#-webkit-keyframes rotate {
100% { transform: rotate(360deg); }
}
Forgot the prefix in the animation property transform:
#-webkit-keyframes rotate {
100% { -webkit-transform: rotate(360deg); }
}
Working Demo
Edit : To make the iteration-count work change the order in CSS, first set the animation and then his properties:
-webkit-animation: rotate 2s; /*This First*/
-webkit-transform:rotate(0deg);
-webkit-animation-iteration-count:infinite;
The Fiddle Demo