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
Related
I need to add 2 chained transforms, one animated and the second with no animations. Something like:
transition: transform 500ms;
transform: translateX(100%);
and then, after 500ms:
transform: translateX(200%); // this time without any transition or, in other words, with transition time == 0ms.
So the object will translate the first 100% width on the X axis with an animation, and than directly go further to 200% without animating, just plain set.
How to?
You can use animation like below:
.box {
width: 100px;
height: 100px;
background: red;
animation: change 1s forwards;
}
#keyframes change {
50% {
transform: translateX(100%);
}
50.1%, 100% { /*change right after 50%*/
transform: translateX(200%);
}
}
<div class="box"></div>
With transition you can consider 2 divs:
.container {
display:inline-block;
transition:0s 0.5s transform;
}
.box {
width: 100px;
height: 100px;
background: red;
transition:0.5s transform;
}
body:hover .container,
body:hover .box{
transform: translateX(100%);
}
<div class="container">
<div class="box"></div>
</div>
This question already has an answer here:
Crossfade two images repeatedly after showing for 10 seconds
(1 answer)
Closed 5 years ago.
I want to make two images fade smoothly between them.
Images appear on browser, but animation does not work.
I think this issue is related to #keyframes or #cf3 img.top sections... The other sections seems to work.. Tested on chrome.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="cf">
<img class="bottom" src="assets/1.png" />
<img class="top" src="assets/2.png" />
</div>
</body>
</html>
style.css, this is where the fading animation is at:
#cf {
position: relative;
height: 281px;
width: 450px;
margin: 0 auto;
}
#cf img {
position: absolute;
left: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#keyframes cf3FadeInOut {
0% {
opacity: 1;
}
45% {
opacity: 1;
}
55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#cf3 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
Your code is fine you are selecting the wrong id.
Your code:
#cf3 img.top {
Should be
#cf img.top {
The keyframes can be above or below the selector both will work.
Example
How do I activate the CSS animation when the .move class is added to the .box using only CSS? The animation should translate first and when the translate has finished the rotate should begin where the translate ended. Also, how do I make the end state of the animation to be persistent at 100% and reset to 0% when the .move class is removed?
$(".test").click(function(){
$(".box").toggleClass("move")
});
body{
padding: 45px;
}
.test{
margin-top: 15px;
}
.box{
height: 45px;
width: 45px;
background: black;
}
.move{
background: blue;
}
.box{
animation: slide 0.5s, rotate 0.5s;
animation-delay: 0s, 0.5s;
}
#keyframes slide{
100%{
transform: translateX(450px);
}
}
#keyframes rotate{
100%{
transform: rotate(45deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
</div>
<button class="test">Toggle</button>
You can add multiple transforms by placing them together:
transform:translateX(450px) rotate(45deg);
To do this with a key-frame animation, you want to do all stages as a single animation. You will want to apply the animation to the .move class and set animation-fill-mode: forwards to persist the last frame until the class is removed.
$(".test").click(function(){
$(".box").toggleClass("move")
});
body{
padding: 45px;
}
.test{
margin-top: 15px;
}
.box{
height: 45px;
width: 45px;
background: black;
}
.move{
background: blue;
animation: slide 1s;
animation-fill-mode: forwards;
}
#keyframes slide{
50%{
transform: translateX(450px);
}
100%{
transform:translateX(450px) rotate(45deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
</div>
<button class="test">Toggle</button>
That is possible by setting multiple transitions on the element, combined with the transition-delay property.
One note: since each transition has a one to one correspondence to a property, and since you are using the transform property for both the "move" and "rotate" operations, it won't work the way you've written it.
For the "move" operation, I am using margin-left rather than the transform property. You can use any method, as long as it is animatable and doesn't overload a property that you are using for one of the other transitions.
$(".test").click(function(){
$(".box").toggleClass("move")
});
body {
padding: 45px;
}
.test {
margin-top: 15px;
}
.box {
height: 45px;
width: 45px;
background: black;
transition:
margin-left 0.5s,
transform 0.5s;
/* delays for when the .move class was just removed */
transition-delay: 0.5s, 0s;
}
.box.move {
background: blue;
margin-left: 450px;
transform: rotate(45deg);
/* delays for when the .move class was just added */
transition-delay: 0s, 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
</div>
<button class="test">Toggle</button>
You can also specify the delay directly in the transition shorthand property, like this.
/* transitions for when the .move class was just removed */
transition:
margin-left 0.5s 0.5s,
transform 0.5s 0s;
It seems what you're looking for is a solution based on transition, not animation (unless I misunderstand what you're looking for, in which case please comment):
$(".test").click(function(){
$(".box").toggleClass("move")
});
.test, .box {
margin-top: 15px;
}
.box {
height: 45px;
width: 45px;
background: black;
position: relative;
left: 0;
transition: left 5s, transform 5s linear 5s;
}
.box.move {
background: blue;
left: 450px;
transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
</div>
<button class="test">Toggle</button>
This may kinda invalidate what you're trying to do, but you're setting transform twice - if you need to target multiple transform properties on one element, you need to do it in one tranform declaration, like this:
.box{
animation: boxStuff 0.5s
}
#keyframes boxStuff{
100%{
transform: translateX(450px) rotate(45deg);;
}
}
Otherwise whichever is further down is just overriding the other. Maybe you can use a margin or something instead of translateX to work around this?
For the other half of your question, you should be able to add this to the .move class to stop on the last animation frame until the move class is removed.
animation-fill-mode: forwards;
If I understood you correctly, this is the result you want.
<a class="test">Toggle</a>
<div class="box"></div>
.box {
width: 200px;
height: 200px;
margin-left: 0;
background: gold;
transform: rotate(0deg);
transition: transform .3s 0s, margin .3s .3s;
}
.move {
margin-left: 50px;
transform: rotate(45deg);
transition: margin .3s 0s, transform .3s .3s;
}
and here's a fiddle https://jsfiddle.net/VilleKoo/owsm0f7h/1/
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.
I'm trying to show a notification on button click. The button click actually checks for email validation. I know to show a div with content with the error message. However, I would like to fade out the error message, lets say after 5 seconds . I would like to achieve it using CSS. Below is my attempt, it just hides everything. Please advise.
#signup-response{
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #FF0000;
margin-top: 20px;
-webkit-transition: opacity 5s ease-in-out;
-moz-transition: opacity 35s ease-in-out;
-ms-transition: opacity 5s ease-in-out;
-o-transition: opacity 5s ease-in-out;
opacity: 0;
}
You can use animation example.
Set the animation-delay to the time you want. Make sure you use animation-fill-mode: forwards to stop the animation.
#signup-response{
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #FF0000;
margin-top: 20px;
animation:signup-response 0.5s 1;
-webkit-animation:signup-response 0.5s 1;
animation-fill-mode: forwards;
animation-delay:2s;
-webkit-animation-delay:1s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
}
#keyframes signup-response{
from {opacity :1;}
to {opacity :0;}
}
#-webkit-keyframes signup-response{
from {opacity :1;}
to {opacity :0;}
}
Using css3 keyframe animation:
(You'll probably want to add -webkit- -moz-, -ms-, and -o- prefixes on the animation and animation-delay properties inside .error-message and on the keyframes to support older browsers.)
.error-message {
animation: fadeOut 2s forwards;
animation-delay: 5s;
background: red;
color: white;
padding: 10px;
text-align: center;
}
#keyframes fadeOut {
from {opacity: 1;}
to {opacity: 0;}
}
<div class="error-message">
<p>Some random text</p>
</div>
cross browser hack (instead of using css3 animation keyframes):
transition-timing-function: cubic-bezier(1,1,1.0,0);}
-webkit-transition-timing-function: cubic-bezier(1,1,1.0,0);
http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp