I'm wondering, if CSS position animations with "transition" and "transform" really don't affect the position of objects around the animated object, or if I'm missing something. I'm trying to get it to affect the sibling.
-webkit-transition: all 0.5s ease;
-webkit-transform: translateY(10em);
http://jsfiddle.net/W2L7B/6/
Thanks for your help!
For translate3d you need to have perspective I believe. Try this:
.slide {
-webkit-perspective: 1000;
-webkit-transform: translate3d(0,10em,0);
}
If you want both of them to move, just add the transition to #second as well, then add this css:
.slide, .slide + div { /* or use ~ if you want it to affect all next siblings */
-webkit-transform: translateY(10em);
-webkit-perspective: 1000;
}
FIDDLE
Related
Having an issue with CSS transitions ignoring their parents overflow property during the transition in Chrome/Safari.
JS adding an active class to the child:
$('.child').addClass('active');
CSS for the parent/child
.parent {
position:relative;
width:250px;
height:250px;
background:#000;
border-radius:250px;
overflow:hidden;
}
.child {
opacity:0;
transition:1s opacity ease-in-out;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
background:blue;
width:250px;
height:250px;
&.active {
opacity:1;
}
}
Here's the fiddle: https://jsfiddle.net/b3ejm7qr/1/
During the transition, the child's content is shown outside of it's parent then disappears on completion.
Have tried adding backface-visibility with no luck.
Been trying to find the same problem but haven't had any luck... Was wondering if this is a known issue in Chrome/Safari and whether there's a fix / workaround?
Thank you!
You can have 3 solutions to your problem.
The two solutions that have already been stated as:
Add z-index: 1 to your parent.
Mention border-radius: 50% to the child.
And,
Just add the backface-visibility browser specific properties to your parent, along with the transform: translate3d properties. You have to set the translate3d properties manually due to a bug in the webkit browsers.
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
It can be browser bug . But you can give border-radius: 50% for your child element . After giving radius for child everything will for in all browsers
I added z-index to both elements, and maybe is what are you looking at. https://jsfiddle.net/b3ejm7qr/2/
If not, looks like is a bug type, as Giorgi says (Google search, first link).
So in this simple example lets say you have an element that on hover has an animation that moves it to the right. Then when the mouse moves instead of jumping straight back to the original position it transitions back to that state.
#test{
position:absolute;
left:0;
transition:left 3s linear;
}
#test:hover{
animation:move 4s linear;
}
#keyframes move{
0%{
left:0;
}
100%{
left:300px;
}
}
<div id="test">Hover</div>
The result doesn't work in any either Edge or Chrome. Firefox works but only on the first animation. Any subsequent animations won't work until you refresh the page. So is this possible? And why does Firefox work once then stop?
So I am clearer this is an simple example. Sure this can be done with just transitions, but transitions are limited and not always possible. Also if you will notice a return animation isn't possible since it could be from an arbitrary point.
Rather than using the animation and transition properties, you can accomplish this using just the transition property.
#test{
position:absolute;
left: 0;
transition: left 4s linear;
}
#test:hover{
left: 300px;
transition: left 4s linear;
}
The issue you're having is that the animation must complete in order to transition into a different state. Furthermore, when you mouse out another animation needs to be added to the non-hover selector which animates from 300px back to 0px. To fix this, just use the transition property within the hover and non-hover selectors. However, this is really only a 2 state solution. If you want more granular control of the animation then you'll probably want to create two separate animations one for forward and one backwards.
Just use the transition on the non-hover selector. No need for animation here.
#test {
position:absolute;
left: 0;
transition: left 4s linear;
}
#test:hover {
left: 300px;
}
<div id="test">Hover</div>
I want to animate an element's position change with CSS transition, but it is not working even when I use the transition on all properties, as in the example here: http://jsfiddle.net/yFy5n/3/
However, I don't want my final solution to apply transition to all properties, but instead only on the position change. So the color change should be instant, only the position change from left to right should be animated (the opposite of what is happening now).
You forgot to define the default value for left so it doesn't know how to animate.
.test {
left: 0;
transition:left 1s linear;
}
See here: http://jsfiddle.net/shomz/yFy5n/5/
Please Try this code margin-left:60px instead of left:60px
please take a look: http://jsfiddle.net/hbirjand/2LtBh/2/
as #Shomz said,transition must be changed to transition:margin 1s linear; instead of transition:all 1s linear;
try this:
.test {
position:absolute;
background:blue;
width:200px;
height:200px;
top:40px;
transition:left 1s linear;
left: 0;
}
I have been experimenting and trying but have not been able to achieve the following. I'm sure the solution is simple, but I haven't hit it yet.
Let's say I want to animate an element (eg. div) when I apply a class (eg. active). And I want to reverse the animation when I remove the class (or toggle with another).
The properties I would like animate are scale (transform) and opacity.
Also, when entering the page, the element will not have any class, and should snap to its state, and not animate. It should only animate when explicitely adding or removing the class.
jsfiddle: http://jsfiddle.net/bertvan/9r98w/
HTML:
<div id="the-div"></div>
Trigger
JS:
$(function(){
$("a").click(function(){
$("#the-div").toggleClass("active");
});
});
CSS:
#the-div{
width: 200px;
height: 200px;
background-image: url("http://placeimg.com/200/200/any");
-webkit-transform: scale(0.7);
opacity: 0.5;
}
#the-div.active{
/* animate scale & opacity */
-webkit-transform: scale(1);
opacity: 1;
}
You are missing a transition property on the div selector:
running demo
code added:
#the-div{
transition: all 2s;
}
This is an example of a code to toggle class for changing size of a div with the transition-animation.
The HTML:
input-button with id="setRemoveClassBtn"
a div-tag with id="div1"
You will need a CSS-class-definition (notice that this is with the moz-prefix made to work in Firefox):
div{
width: 150px;
height: 150px;
background-color: rgb(250, 250, 150);
-moz-transition: width 5s, height 5s;
}
div.bigSizeDivs{
width: 250px;
height: 250px;
}
You will have to use javascript/jQuery to add/remove class. Here is an example with jQuery
$("#setRemoveClassBtn").click(function(){
$("#div1").toggleClass("bigSizeDivs");
});
I have to make a responsive website and as i shrink the browser to a specified size, i want the logo on the left to move to the right so that it is in the centre.
Here's an example of the transition i want to achieve. It is under "2.Animating your transitions" box1
I know that the transition starts on hover but is it possible to activate it when the browser is resized? or any alternative methods at all?
You can do this by using a mixture of CSS3 transitions and the #media queries.
div
{
height: 100px;
width: 200px;
position: relative;
background-color: #eee;
-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;
transition: all 1s ease-in-out;
}
#media all and (min-width: 400px) {
div
{
background-color: #fc3;
left: 100px;
}
}
What this does is sets up the transitions on the element with relative position but obviously does not fire them (as there's no :hover or other selector) and declares a change in position (left: 100px;) when the browser is more than 400px wide. Use max-width for a "more than" value.
Obviously you need to change the values to what you need, but this is how it should be done.
http://jsfiddle.net/AvhvD/
Here is how i would do:
1: .logo { display block, width: xxx; margin 0 auto; transition: margin ... }
2: #media (...) {
.logo {
margin-left: 0;
}
}
I was thinking that you could make a conditional statement in JavaScript and Jquery that would test the following to be true: If the browser window is resized and the size of the browser window is between a range, add a css class. If not remove the css class.
With this new class created, maybe you can make an animation using CSS3. I am not too familiar if this would work, but you could always just revert back to JQuery.
Furthermore, I don't know if transitions can be applied inside of media queries. If so, I am a big proponent and would highly recommend using them.
Hope I could help.