I have an element that needs to be move from left to right and right to left when I change the left, right variables.
Here is an jsfiddle example that I'm working on it. It moves left to right and right to left but there is no animation.
What I am doing wrong?
CSS:
Demo JSFiddle
div
{
width:100px;
height:100px;
background:red;
transition-property: right, left;
transition-duration: 2s;
-webkit-transition-property: right, left; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
position:absolute;
}
div:hover
{
right:0px;
}
HTML:
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
It's because you aren't giving the un-hovered state a right attribute.
right isn't set so it's trying to go from nothing to 0px. Obviously because it has nothing to go to, it just 'warps' over.
If you give the unhovered state a right:90%;, it will transition how you like.
Just as a side note, if you still want it to be on the very left of the page, you can use the calc css function.
Example:
right: calc(100% - 100px)
^ width of div
You don't have to use left then.
Also, you can't transition using left or right auto and will give the same 'warp' effect.
div {
width:100px;
height:100px;
background:red;
transition:2s;
-webkit-transition:2s;
-moz-transition:2s;
position:absolute;
right:calc(100% - 100px);
}
div:hover {
right:0;
}
<p>
<b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.
</p>
<div></div>
<p>Hover over the red square to see the transition effect.</p>
CanIUse says that the calc() function only works on IE10+
Try this
div
{
width:100px;
height:100px;
background:red;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
position:absolute;
}
div:hover
{
transform: translate(3em,0);
-webkit-transform: translate(3em,0);
-moz-transform: translate(3em,0);
-o-transform: translate(3em,0);
-ms-transform: translate(3em,0);
}
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
DEMO
You should try doing it with css3 animation. Check the code bellow:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: myfirst 5s infinite; /* Chrome, Safari, Opera */
-webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
animation: myfirst 5s infinite;
animation-direction: alternate;
}
/* 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;}
}
#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;}
}
</style>
</head>
<body>
<p><strong>Note:</strong> The animation-direction property is not supported in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
Where 'div' is your animated object.
I hope you find this useful.
Thanks.
Related
I am trying to do a "simple" animation with css & html. I have an image, which I want to be hidden for the first 18 seconds when entering the page, after that, the image will be visible and the animation will begin.
The animation should go to the sides of the screen in square shape for about 30 seconds, and then it will disappear. (Like from bottom left to bottom right, to top right, right bottom in a loop).
I managed to do half of it, kinda. The image hidden thing isn't working, the animation is working but it is not stopping after 30 seconds and also, when I opened my website on another computer size, the img didn't touch the side like it did with my laptop (different screen size). If you could provide me with an answer I will appreciate it, THANKS!
What I tried:
HTML:
.col-5 {
width: 100px;
height: 100px;
position: relative;
-webkit-animation: myfirst 3s 100;
/* Safari 4.0 - 8.0 */
-webkit-animation-direction: normal;
/* Safari 4.0 - 8.0 */
animation: myfirst 3s 100;
animation-direction: normal;
animation-delay: 18s;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes myfirst {
0% {
bottom: 0px;
top: 440px;
left: 0px;
}
25% {
bottom: 0px;
top: 0px;
left: 0px;
}
50% {
bottom: 0px;
top: 0px;
left: 1020px;
}
75% {
bottom: 0px;
top: 440px;
left: 1020px;
}
100% {
bottom: 0px;
top: 440px;
left: 0px;
}
}
<div class='col-5'>
<img style="margin-left: 0%; margin-top: 31%;" src="..\static\kingjulien_iliketo1.gif" style="position:relative;" width="480" height="270" class="juliengif1"></img>
</div>
animation:bottomleft 1s linear 1s forwards, ..... second 1s is first start delay. you can do it 18s. i hope this is answer you want to.
body {
margin:0;
}
.box {
height:50px;
width:50px;
background:#262626;
animation:bottomleft 1s linear 1s forwards, rightbottom 1s linear 2s forwards, righttop 1s linear 3s forwards, lefttop 1s linear 4s forwards;
position:absolute;
visibility:hidden
}
#keyframes bottomleft {
to {margin-top:calc(100vh - 50px);visibility:visible}
}
#keyframes rightbottom {
to {margin-left:calc(100vw - 50px)}
}
#keyframes righttop {
to {transform:translateY(calc(-100vh + 50px))}
}
#keyframes lefttop {
to{margin-top:0px;margin-bottom:calc(100vh - 50px);transform:translateX(calc(-100vw + 50px));}
}
<div class="box"></div>
A couple of things to mention: you have more than one inline style on the image; if you are going to use inline style, list all attributes in one style ="" list. Preferably, use a class: you have a class juliengif1 named in the image, but not defined in the css. I have added the attributes to my snippet/ removed them from the inline style.
(which could be as style="margin-left: 0%; margin-top: 31%; position:relative; width:480px; height:270px;" - css is tidier!)
As for size, well you should investigate media-queries, and compose media queries to apply to your animation in order to accommodate different screen sizes.
I recommend an alt tag onto your image just in case the image doesn't show.
I changed the duration of the animation to 30s ("myfirst 30s"), so that the animation would stop as you wish, after 30 seconds. I have added background-colors to the transitional moves (which begin after an 18s delay). When you run it you will see that each side of the transition lasts approx 7.5 seconds (30s/4)
Hope this helps
Rachel
#juliengif1 {
margin-left: 0%;
top: 31%;
position: relative;
width: 480px;
height: 270px;
background-color:blue;
}
.col-5 {
width: 100px;
height: 100px;
position: relative;
-webkit-animation: myfirst 30s;
/* Safari 4.0 - 8.0 */
-webkit-animation-direction: normal;
/* Safari 4.0 - 8.0 */
animation: myfirst 30s ;
animation-direction: normal;
animation-delay: 18s;
}
/*Safari 4.0 - 8.0*/
#-webkit-keyframes myfirst {
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 400px; top: 0px;}
50% {background: red; left: 400px; top: 300px;}
75% {background: yellow; left: 0px; top: 300px;}
100% {background: red; left: 0px; top: 0px;}
}
#keyframes myfirst {
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 400px; top: 0px;}
50% {background: red; left: 400px; top: 300px;}
75% {background: yellow; left: 0px; top: 300px;}
100% {background: red; left: 0px; top: 0px;}
}
<div class='col-5'>
<img id="juliengif1" src="..\static\kingjulien_iliketo1.gif" alt="hi">
</div>
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 want to smoothly scale the div from ratio 0.06 to 1 using css on mouseover.but i m not able to get that effect.
Here is what i have tried
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 4s;
}
div:hover {
transform:scaleX(0.06);
animation-name: example;
animation-duration: 1s;
}
#keyframes example {
25% {transform:scaleX(0.200);}
50% {transform:scaleX(0.500);}
75% {transform:scaleX(0.700);}
100% {transform:scaleX(1);}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div>jhk</div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
How can i do this?
You didn't really specify how you want to transition everything so here is a basic example:
div {
width: 100px;
height: 100px;
background: red;
transition: all ease-in 2s;
transform:scale(0.06);
}
div:hover {
transform:scale(1);
}
You don't need keyframes for smooth animations. Something simple like that can be accomplished with simple CSS transforms.
Working fiddle: http://jsfiddle.net/mh90y3xv/
try this. You don't need transition when using key frames
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transform:scaleX(0.06);
transform:scaleX(0.06);
}
div:hover {
animation-name: example;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#-webkit-keyframes example {
0% {-webkit-transform:scaleX(0.06);}
100% {-webkit-transform:scaleX(1);}
}
#keyframes example {
0% {transform:scaleX(0.06);}
100% {transform:scaleX(1);}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div>jhk</div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
No need to use #keyframes just use transition.
Here's the JsFiddle link.
HTML
<div>
<div class="animate">
jhk
</div>
</div>
Note: You must add a div with a class animate to maintain the transition.
CSS
div,
.animate {
width: 100px;
height: 100px;
}
.animate {
background: red;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
div:hover > .animate {
-webkit-transform:scaleX(0.06);
-moz-transform:scaleX(0.06);
-o-transform:scaleX(0.06);
transform:scaleX(0.06);
}
In this case, using transition is a lot smoother than animation and #keyframes.
Hope it helps.
I hope you want something like this.
CSS
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: all .06s ease-in-out;
-o-transition: all .06s ease-in-out;
transition: all .06s ease-in-out;
}
div:hover {
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
-o-transform: scale(0.6);
transform: scale(0.6);
}
#keyframes example {
25% {transform:scaleX(0.200);}
50% {transform:scaleX(0.500);}
75% {transform:scaleX(0.700);}
100% {transform:scaleX(1);}
}
Fiddle
I have a following div
<div>Circle</div>
I applied styles to the circle using the nth-child, the circle and the text inside it are supposed to spin. In the beginning, when I created the circle, I used
display:table-cell;
property to position the text in the center of the circle. When I run my page in Chrome, all the styles including the positioning look perfect. However, when I ran my code in Mozilla Firefox, I noticed that the positioning left and top don't work when I have display:table-cell; property set. They only work if I remove the display. However, if I remove the display, then my text is messy. In that case I decided to create a pseudo div. I managed to position the text in the the center of the circle, however, when I refresh the page, the spinning circle pushes to the right and the text doesn't spin. How can I fix this problem?
style.css
div:nth-child(3) {
width: 150px;
height: 150px;
background: -webkit-linear-gradient(#006600, #009900, #006600);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#006600, #009900, #006600);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#006600, #009900, #006600);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#006600, #009900, #006600);
/* Standard syntax */
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
border-radius: 150px;
text-align: center;
vertical-align: middle;
position: relative;
display:table-cell;
top: 5%;
left: 75px !important;
color: #F0F0F0;
font-size: 25px;
-webkit-animation-name: spin;
-webkit-animation-duration: 500ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 500ms;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 500ms;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 500ms;
animation-iteration-count: 1;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
The following code is when I made a pseudo div, I did not include the css for spinning since it is the same as in the code above. The circle spins, but for that second that it spins it does to the right and then comes back. The text doesn't spin.
div:nth-child(3){
text-align:center;
position:relative;
width: 150px;
top: 50%;
left: 75%;
color: #F0F0F0;
font-size: 20px;
}
div:nth-child(3):after {
content: '';
width: 150px;
height: 150px;
position: absolute;
bottom: -80%;
left: 50%;
transform: translateX(-50%);
z-index: -1;
background: -webkit-linear-gradient(#006600, #009900, #006600);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#006600, #009900, #006600);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#006600, #009900, #006600);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#006600, #009900, #006600);
/* Standard syntax */
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
border-radius: 150px;
}
jsFiddle : http://jsfiddle.net/jLwmknk1/
Try applying this:
display: table;
table-layout: fixed;
instead of display:table-cell;
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;}
}