I have tried to do an hover animation which brings the info from bottom to center, the problem is that the div position point starts too much from the bootom and it cause that the top and center area don't trigger the hover animation, only the bottom area triggered it. how can i fix the position of the div and still keep the animation from bottom?
here is the fiddle link: js fiddle link
the main issue is in this div:
.movie_thumb_wrapper .text-content {
color: white;
cursor: pointer;
display: table;
opacity: 0;
transition: all 0.5s ease;
transform: translate(0,-150px);
-webkit-transform: translate(0,100px);
-o-transform: translate(0,-50px);
-moz-transform: translate(0,-50px);
}
user agent stylesheetdiv {
display: block;
}
Change the selector
.movie_thumb_wrapper .text-content:hover
to
.movie_thumb_wrapper:hover .text-content
So that the transition takes place when hovering over the parent element instead:
Updated Example
.movie_thumb_wrapper:hover .text-content {
opacity: 1;
transform: translate(0, -150px);
-webkit-transform: translate(0, 0px);
-o-transform: translate(0, -50px);
-moz-transform: translate(0, -50px);
}
Related
I have created an animation where i am expanding before element in key frame like this,
.expertise_item:hover::before{
opacity:1;
-webkit-animation:widthanimationexperties 3s cubic-bezier(0, 0, 0.72, 0.79);
-webkit-animation-iteration-count: 1;
}
#-webkit-keyframes widthanimationexperties {
0% { max-width:0;}
50% { max-width:150px; }
100% { max-width:300px;}
}
I have even odd situation and i have flip the even.
.expertise_item:nth-child(even)::before{
bottom: -33px;
left: -134px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Q. How i expand div from left side instead of right for even elevemnt.
You can expend html element in css put
margin-left: -134px;
Perhaps you can use animation to make a growing effect from the left side
See the fiddle
I have a div, for which css transitions are applied on hover,
on hover in, a transition is applied on the :before element, and on hover out, same transition (reversed) is applied on the :before element.
here is the html:
<section class="strips">
<article class="strips__strip">
<div class="strip__content">
<h1 class="strip__title">Title</h1>
</div>
</article>
</section>
and (important parts of) the css:
.strips .strip__content:hover:before {
transform: skew(180deg) scale(1) translate(0, 0);
opacity: 0.1;
}
.strips .strip__content:before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
opacity: 0.05;
transform-origin: center center;
transform: skew(180deg) scaleY(0) translate(0, 0);
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
Now, the transitions work smoothly if i allow tem to finish, but say, if i dont allow the hover in transition to finish , and quickly hover out, then the hover out transition does not work.
here is a fiddle:
https://jsfiddle.net/x2pavnac/
(try hovering out before the transition finishes).
I am not sure why this happens and how this issue can be addressed in css.
EDIT:
i have simplified the transition and also increased opacity, so it is more visible.
Updated fiddle: https://jsfiddle.net/x2pavnac/4/
I am not sure why this works well for others, but i found a typo in my css which was the issue in my case:
.strips .strip__content:before {
transform: skew(180deg) scaleY(0) translate(0, 0);
}
.strips .strip__content:hover:before {
transform: skew(180deg) scale(1) translate(0, 0);
opacity: 0.1;
}
should be
.strips .strip__content:before {
transform: skew(180deg) scaleY(0) translate(0, 0);
}
.strips .strip__content:hover:before {
transform: skew(180deg) scaleY(1) translate(0, 0);
opacity: 0.1;
}
notice the scaleY(1) instead of scale(1).
I am still not sure why it worked correctly for others though, even with the typo.
Problem
I'm trying to make a layer appear like it's a wall falling down, revealing the layer behind it. I've setup two fixed div positions. The "Wall" div has a z-index of 9999, the "Background" div has a z-index of 0;
In Webkit browsers (Safari/IOS) that I've tested, it seems like once the animation starts on the "wall", the z-indexes are lost or ignored, causing the "wall" layer to abruptly disappear behind the background div.
Any ideas on how to preserve the z-indexes of the layers? Thanks in advance!
Example Code
(note: jsFiddle at the bottom)
HTML Code
<div id="wall">
This is the wall
</div>
<div id="background">
This is the background
</div>
<button id="start" style="float: right;">
Flip Down
</button>
Some javascript to enable the button
$('#start').click(function(){
alert('Should Fall Down like a wall, revealing the background');
$('#wall').addClass('animated flipDown');
});
CSS Code (cribbed from animate.css)
#wall{
background-color: #F00;
width: 100px;
height: 100px;
position:fixed;
top:0;
left:0;
z-index: 9999;
}
#background{
background-color: #00F;
width: 100px;
height: 100px;
position:fixed;
top:0;
left:0;
z-index: 0;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/*** flipDown ***/
#-webkit-keyframes flipDown {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
-webkit-transform-style: flat;
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
-webkit-transform-style: flat;
opacity: 1;
}
}
#keyframes flipDown {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
.flipDown {
-webkit-animation-name: flipDown;
animation-name: flipDown;
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-transform-origin: bottom;
-ms-transform-origin: bottom;
transform-origin: bottom;
}
jsFiddle
http://jsfiddle.net/3mHe2/2/
Check out the differences in Safari vs Chrome.
My rotating element wasn't suitable to have a neighbour to the background, but I fixed it by applying
transform: translateZ(1000px);
transform-style: preserve-3d;
to the parent of the rotating element. Safari now thinks it's 1000px infront of the background.
Found a solution. Hopefully this helps someone in the future.
It turns out that there is a "bug" in the safari versions of webkit. When a 3d css animation is playing, the original z-indexes are lost. Instead, it seems like the animating pieces are put into a separate z-index "group" that is separate from the rest of the z-indexes of the DOM.
The solution is to join the backdrop div and the wall div into the same z-index group by wrapping it in a div with a webkit-transform that doesn't change anything. That causes the backdrop and wall to be children of the wrapper div and the z-indexing of the respective children are preserved.
<div id="wrapper" style="-webkit-transform: translate3d(0px, 0px, 0px);">
<div id="wall">
This is the wall
</div>
<div id="background">
This is the background
</div>
</div>
I believe it is the same or similar issue to this:
css z-index lost after webkit transform translate3d
I ran into this issue and nothing would fix it until i added perspective to the parent container of the item that should be behind.
.wrap{
perspective: 1000px;
}
In my case I was able to solve the issue by applying translateZ to the parent and translate scale to the child.
.parent {
transform: translateZ(22px);
}
.child {
transform: scale(0.955);
}
In my demo link, kindly hover the image section, see the image exceed issue.
Over flow hidden and border radius not working when i use css transition scale effects in chrome browser.
It's working fine on Mozilla Firefox, but chrome is not working correctly, i give overflow hidden & border radius but the hover image is exceed on image area.
How to solve this problem. I tried lot's of time, but i can't fix & can't find the correct solution.
kindly click the demo
http://tcxsandbox.com/stack-overflow/
And also check the 2nd comment, I have placed the fiddle link.
You must declare the parent element in relative position and child with absolute , after use z-index and declare parent (with border-radius and overflow hidden) before child . example:
<div class="parent">
<img class="child" src="yourimage.jpg" />
</div>
<style>
.parent{
/*must declare border radius and z-index*/
position: relative;
border-radius:100px;
z-index:5;
}
.parent img{ /*Child element*/
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out ;
transition: all .3s ease-in-out;
-webkit-transform: scale(1,1) ;
-moz-transform: scale(1,1);
transform: scale(1,1);
z-index:4; /*here's where magic happens*/
}
.parent img:hover{
img{
-webkit-transform: scale(1.1,1.1) ;
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
}
}
</style>
this should work.
NOTE: i recommend declare border radius for both elements (parent and child ) for prevent crossbrowsing problems .
consider below code:
.box-main-img {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}
Add border-radius to your box-main-img class
.box-main-img {
float: left;
width: 100%;
overflow: hidden;
height: 143px;
border-radius: 5px;
}
FIDDLE
When applying a CSS scale transform to an element, is it possible to set the 'from' value as the current scale?
For example, consider the following 2 CSS keyframes used to apply separate growing and shrinking animation transforms:
#-webkit-keyframes grow
{
from { -webkit-transform: scale(0,0); }
to { -webkit-transform: scale(1,1); }
}
#-webkit-keyframes shrink
{
from { -webkit-transform: scale(1,1); }
to { -webkit-transform: scale(0,0); }
}
This will successfully scale the element it's applied to, but always from 0 to 1 (or vice-versa). If the shrink keyframe gets applied before the grow keyframe has finished, it has the effect of 'jumping' the scale to 0 before the transform begins.
You can see this effect in this jsFiddle showing CSS scale transform on mouseover
Notice that if you mouse over the black square and then quickly mouse out, the scale transform is not smooth.
What I'm essentially after is something like the following:
#-webkit-keyframes grow
{
from { -webkit-transform: CURRENT_SCALE; }
to { -webkit-transform: scale(1,1); }
}
Your animation makes the element go from 0% scale to 100% scale on hover, and from 100% to 0% scale on mouseOut.
I think in this case, the solution could be setting the basic scale of the element according to its start point :
#output
{
width: 200px;
height: 200px;
border-radius: 50%;
background: #FF0000;
display: inline-block;
-ms-transform: scale(0,0);
transform: scale(0,0);
-webkit-transform: scale(0,0);
}
In this case, I would harldy recommend using pure CSS solution, using transition on :hover : http://jsfiddle.net/bg6aj/21/
You wont have any "jumping" effect :
#output
{
width: 200px;
height: 200px;
border-radius: 50%;
background: #FF0000;
display: block;
-ms-transform: scale(0,0);
transform: scale(0,0);
-webkit-transform: scale(0,0);
transition: all .2s;
-webkit-transition: all .2s;
}
#touchPad:hover + #output {
-ms-transform: scale(1,1);
transform: scale(1,1);
-webkit-transform: scale(1,1);
}
At this point, you'll have no more jumping effect.
Then : can we do something like :
#-webkit-keyframes grow
{
from { -webkit-transform: scale(0,0); }
to { -webkit-transform: scale(1,1); }
}
Answer : quite easy :
#-webkit-keyframes grow
{
0% { -webkit-transform: scale(1,1); }
50% { -webkit-transform: scale(0,0); }
100% { -webkit-transform: scale(1,1); }
}
Which means: take my element (as scale default is 100%), render it with 0% scale at 50% of the animation, and turn it back at 100%. Trying to set something like current_scale doesn't make sense.
Considering that, I'll definitely choose the Transition solution.