Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I've been toying around with animate.css and it has completely messed up my website. I'm not sure of the cause at all. Also I would like the animation to only happen when the div is in the view-port and I'm not sure how to do so.
https://road-aware.herokuapp.com/
You have to just override default animate.css behaviour. Because you already use transform in your css and animate.css overrides your css. ;)
See this jsfiddle sample
It's without browser prefixes, but that should be not big deal. ;)
#keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(-50%, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(-50%, -40%, 0);
}
75% {
transform: translate3d(-50%, -60%, 0);
}
90% {
transform: translate3d(-50%, -45%, 0);
}
to {
transform: translate3d(-50%, -50%, 0);
}
}
Change your .landing-container to:
.landing-container {
text-align: center;
position: relative;
top: 50%;
padding: 15px 0;
box-sizing: border-box;
width: 80%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin: auto;
display: block;
}
Changing the position makes sure the element centers vertically. Removing left: 50% and adding margin: auto centers it horizontally. Adding the display: block makes the two above possible.
you can use overflow: hidden
<style type="text/css">
.examplediv {
background-color:#efefef;
border-style:solid #000000 1px;
}
#divid {
position:absolute;
left:450px; top:350px; width:35000px; height:35000px;
overflow:scroll;
}
</style>
<body>
<div id="divid" class="examplediv">
...
</div>
widthout
.examplediv
{
background-color:#efefef;
border-style:solid #000000 1px;
}
#divid
{
position:absolute;
left:450px; top:350px; width:35000px; height:35000px;
}
<body>
<div id="divid" class="examplediv">
</div>
http://www.css4you.de/overflow.html
Related
I tried to rotate an animated font arrow when the window reached a min/max size, but when the rotate takes place the animation stops, also just for testing I tried replacing transform: rotate(90deg) to transform: rotate(0deg) which maintains the same arrow's direction but it causes to stop the animation too. The issue is with transform: rotate() and it can be easily tested by inspecting the element and activating/deactivating it in the browsers developer tools.
An easy way to bypass this can be using two <p> each one with an arrow in different direction and with vertical and horizontal animation each, and using display: none; to alternate between them when the min/max size switches, but what I want is to know why this is happening and how to solve this using this approach
.text-center {
text-align: center;
}
.lnr-x3 {
font-size: 2.4rem;
}
#media (max-width: 991px) {
#catalogArrow_h {
transform: rotate(90deg) !important;
transform-origin: center !important;
}
}
.animated-h {
text-decoration: none;
outline-style: none;
-webkit-animation: movingHorizontally 1.7s ease-in-out infinite;
animation: movingHorizontally 1.7s ease-in-out infinite;
}
#keyframes movingHorizontally {
0% {
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
50% {
transform: translateX(-10px);
-webkit-transform: translateX(-10px);
}
100% {
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
}
#-webkit-keyframes movingHorizontally {
0% {
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
50% {
transform: translateX(-10px);
-webkit-transform: translateX(-10px);
}
100% {
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
}
<!-- Font Icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" type="text/css">
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<div class="col-12">
<p class="text-center pt-3 px-5">
<span id="catalogArrow_h" class="lnr lnr-x3 lnr-arrow-right fas animated-h"></span>
</p>
</div>
Why does this happen
The transform property is "shared" for many transform functions and css doesn't combine any property's values.
Because your animation is made with transform: translateX(..), adding transform: rotate(..) will overwrite the property's value, not combine them. I.e. the resulting style is transform: rotate(..), not transform: translateX(..) rotate(..).
It would be the same if you were animating the box-shadow and then wanted an inset box-shadow too, it would overwrite one with the other. Or more simply - if you have .box { color: red; color: blue; } css will choose the last value (blue) to apply to the color property.
If there were css properties rotate: 90deg and translate: 4px (there are but not widely supported), then your animation would work, because the translate animation would be applying to a different property than the rotation, not overwriting one that is essentially shared amongst many transform functions.
Ways around it
There are many ways around this problem.
You can set the translate or rotate on the parent element
<div class="rotate-90">
<span class="translate-animate"></span>
</div>
You can add the rotate to your translate animation properties:
#keyframes movingHorizontallyRotated {
0%, 100% { transform: translateX(0px) rotate(90deg); }
50% { transform: translateX(-10px) rotate(90deg); }
}
You can animate a different property to translate the element:
#keyframes movingHorizontally {
0%, 100% { padding: 5px 10px 5px 0px; }
50% { padding: 5px 0px 5px 10px; }
}
You can use/make an already rotated arrow if your framework/ assets provides one.
I have a css div I want first to rotate at 180deg from the center origin and then rotate from -45deg from the "new" bottom left corner.
But I don't manage to apply two different rotations
https://imgur.com/a/9GSToEx -> So you can better understand
CSS
.player1{
background-color: blueviolet;
transform-origin: center;
transform: rotate(180deg);
transform-origin: bottom left;
transform: rotate(45deg);
}
HTML
<div class="player1">
<div class="questionSpace"></div>
</div>
Thank you ^^
This can be a bit tricky because of the need to move the origin and the rotations not being additive.
A fairly straightforward way of getting round the problem is to enclose the element in a parent whose sole purpose is to allow an independent 180deg rotation.
This snippet colors the player1 element with a linear-gradient so it can be seen that the 180deg rotation has taken place.
.player1container {
display: inline-block;
transform: rotate(180deg);
margin: 20vmin;
/* added just for demo */
}
.player1 {
background-color: blueviolet;
width: 20vmin;
height: 10vmin;
background-image: linear-gradient(red, blue);
transform: rotate(-45deg);
transform-origin: top right;
}
<div class="player1container">
<div class="player1">
<div class="questionSpace"></div>
</div>
</div>
Hmm. Your code is wrong, because this rules have conflict and last rule have more priority;
transform: rotate(180deg);
...
transform: rotate(45deg);
You need to use #keyframes
for example:
#rotate {
0% {
transform: rotate(0);
}
50% {
transform: rotate(180deg);
}
100% {
transform-origin: left;
transform: rotate(45deg);
}
}
and then you need to use animation: rotate;
This sample of rolling 3D cube does not work correctly on Internet Explorer.
There is must be rotation on 360 degrees like in other browsers.
Which of vendor prefixes are missing?
random text for submitting post insted of more details
random text for submitting post insted of more details
random text for submitting post insted of more details
random text for submitting post insted of more details
random text for submitting post insted of more details
random text for submitting post insted of more details
random text for submitting post insted of more details
/* animation speed */
.container {
-webkit-animation: rotate 18s infinite linear;
animation: rotate 18s infinite linear;
}
/* native */
.cube { transform:scaleX(.7) scaleY(.7); }
* { margin:0; padding:0; outline:none; box-sizing: border-box; }
.stage { width:240px; height:360px; overflow:hidden; }
.cube {
width:240px;
height:400px;
margin-top:-20px;
-ms-perspective:1000px;
-webkit-perspective: 1000px;
perspective: 1000px;
-ms-perspective-origin: center center;
-webkit-perspective-origin: center center;
perspective-origin: center center;
}
.container {
display:block;
width: 240px;
height: 400px;
-ms-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.side {
display:block;
position: absolute;
width: 240px;
height: 400px;
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
}
.face1 {
-webkit-transform: translateZ(120px);
transform: translateZ(120px);
background-color: green;
}
.face2 {
-webkit-transform: translateX(120px) rotateY(90deg);
transform: translateX(120px) rotateY(90deg);
background-color: red;
}
.face3 {
-webkit-transform: translateZ(-120px) scale(-1, 1);
transform: translateZ(-120px) scale(-1, 1);
background-color: teal;
}
.face4 {
-webkit-transform: translateX(-120px) rotateY(90deg) scale(-1, 1);
transform: translateX(-120px) rotateY(90deg) scale(-1, 1);
background-color: black;
}
#-webkit-keyframes rotate { 100% { -webkit-transform: rotateY(-360deg); transform: rotateY(-360deg); } }
#keyframes rotate { 100% { -webkit-transform: rotateY(-360deg); transform: rotateY(-360deg); } }
</style>
</head>
<body cz-shortcut-listen="true">
<div class="stage">
<div class="cube">
<a class="container" href="">
<span class="face1 side"></span>
<span class="face2 side"></span>
<span class="face3 side"></span>
<span class="face4 side"></span>
</a>
</div>
</div>
</body></html>
Have a look here : https://caniuse.com/#search=perspective
As they say for perspective, it is partially supported by ie :
Partial support in IE refers to not supporting the transform-style: preserve-3d property. This prevents nesting 3D transformed elements.
You will have to use another method for ie.
Related post : Transform-Style preserve-3d in internet explorer CSS not working
Hope this help
As it is already suggested by other community member that transform-style preserve-3d is not supported in IE.
You can Work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform.
Reference:
Internet Explorer Preserve 3D fix
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
If I apply animation to element having css style with transform: translate
for example
transform: translateY(100px);
at the end of animation the element jumps to desired position. How to avoid this jump and get smooth animation to desired position?
http://jsfiddle.net/alexchetv/bc49LnLt/
Just remove the last keyframe:
to {
transform: none;
}
div {
width:20px;
height:20px;
background-color:#f00;
animation:bounceInDown 1s;
transform: translateY(100px);
}
#keyframes bounceInDown {
from, 60%, 75%, 90% {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
}
<div></div>
If you have this problem on Opera and Chrome, It's a sneaky bug in Webkit. However, hope these two lines would help.
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
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);
}