I am using Bootstrap 3 framework, and the columns they use seem to do a lot of the centering of content for me
using the css
.test {
position: absolute;
z-index: 9;
left: 50%;
transform: translateX(-50%);
opacity:0;
transition: opacity 0.5s ease;
}
inside a div with position relative.
works fine in firefox, wondering what needs to be added for it to work the same in safari. I know there are browser specific css to add for cross browser compatibility
I had the same problem and I fixed it with webkit prefix:
.test {
position: absolute;
z-index: 9;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
opacity:0;
transition: opacity 0.5s ease;
}
To get rid of these problems, i suggest you use a javascript library like this:
http://leaverou.github.io/prefixfree/
You can happily code your css without adding browsers prefixes, prefixfree will do it for you!
Related
As others have pointed out, CSS animations might get stuck or pause inadvertently because of performance issues, for example a busy JavaScript main thread, like CSS Animation, State change finish animation.
In the context of a webpage using existing third-party libraries or frameworks, we might have no control over the whole web app, so we cannot guarantee that the JavaScript behaves properly.
As there seems to be no way to increase an animation's priority over other browser tasks, and there seems to be no way to decrease the priority of browser tasks initiated by JavaScript so that CSS-initiated tasks are preferred either, and that may have unintended consequences as well, I want to focus on controlling the animation itself.
So, my questions are:
Is there a way to tell the browser, preferably using only CSS, that the animation should rather drop some frames to guarantee to reach the final state in time even if there are performance problems?
If so, can we use CSS animation syntax only, or do we need to use other techniques such as requestAnimationFrame() or complex libraries like GSAP?
Perhaps, there is something like a combination of animation-fill-mode and text-rendering: optimizeSpeed; but to control what to optimize when rendering animations, but I have searched and have not found anything helpful.
What I have tried so far:
.drawer {
position: fixed;
left: 100%;
transition: transform 3s;
background: blue;
}
.drawer.open {
transform: translateX(-400px);
animation-name: slidein;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes slidein {
0% { transform: none; }
25% { transform: translateX(-100px); }
50% { transform: translateX(-200px); }
75% { transform: translateX(-300px); }
100%{ transform: translateX(-400px); }
}
<div class="drawer" id="drawer">drawer</div>
show drawer
Although, this is supposed to be a minimal reproducible example, the bug is hard to reproduce when taken out of context. Please try to use CPU throttling in developer tools to see what I mean.
.drawer {
position: fixed;
left: 100%;
transition: transform 3s;
background: blue;
}
.drawer.open {
transform: translateX(-400px);
animation-name: slidein;
animation-duration: 3s;
}
#keyframes slidein {
0% { transform: none; }
25% { transform: translateX(-100px); }
50% { transform: translateX(-200px); }
75% { transform: translateX(-300px); }
100% { transform: translateX(-400px); }
}
<div>
<div class="drawer open" id="drawer">drawer</div>
show drawer
</div>
I already widely searched on Google and Stackoverflow, but couldn't find a solution.
I made a simple mobile menu with some cool animations.
Here is the codepen: Codepen link
The problem should be in these lines, but I don't understand what's wrong.
.menu a:hover:before {
right: 100%;
visibility: visible;
-webkit-transform: scaleY(1) rotate(360deg);
transform: scaleY(1) rotate(360deg);
}
When you hover the menu, the bars rotate (and it works even on chrome and opera) and change color. If you click it, they rotate again to form a X (and it works even on chrome and opera).
When the menu appears, if you hover the links there's a bar that (should) rotate and go from right to left. If you do it in Firefox it works fine, the bars on the links appears smoothly and rotate from right to left, if you do it on Chrome or Opera, they just appear in the middle and go straight to the left.
Check the codepen, I already inserted browser keywords (i.e. -webkit-) and tried some options but no way to make it working.
Thanks in advance!
.menu a:before {
-webkit-transform: scaleY(0) rotate(0deg);
transform: scaleY(0) rotate(0deg);
-webkit-transition: all 1s ease-in-out 0s;
transition: all 1s ease-in-out 0s;
}
.menu a:hover:before {
right: 100%;
visibility: visible;
-webkit-transform: scaleY(1) rotate(360deg);
transform: scaleY(1) rotate(360deg);
}
works for me if i add rotate(0deg) to the "default" state of the before pseudo element
I have a page with a collection of about 5 images, all scattered on the page with various absolute positions and somewhat varying sizes. My goal is to translate the images to the center of the screen using css and the hover event.
Here is my css so far:
.bbimage{
z-index: 1;
-webkit-transition: -webkit-transform 0.8s ease;
-moz-transition: -moz-transform 0.8s ease;
transition: transform 0.8s ease;
.bbimage:hover{
position:absolute !important;
/*left:50% !important;
top:250px !important; <-very jittery and choppy */
-ms-transform: scale(3) rotate(0deg)!important;
-webkit-transform: scale(3) rotate(0deg)!important;
transform: scale(3) rotate(0deg)!important;
z-index: 3;
cursor: pointer;
}
.bbplaceholder:hover + .bbimage{
position:absolute !important;
left:50% !important;
top:250px !important;
-ms-transform: scale(3) rotate(0deg) !important;
-webkit-transform: scale(3) rotate(0deg) !important;
transform: scale(3) rotate(0deg) !important;
z-index: 3;
cursor: pointer;
}
Originally I was using simple transitions, but I found them to be choppy and jittery, especially in chrome. I ended up switching to transforms, which works great for the scaling and rotation, but I'm left with two problems.
This first problem, it that the transform: translate specifies a relative translation, not to an absolute position. The second problem is the potential variable screen sizes.
My current attack plan it to append the css style using Jquery so as to specify a calculated relative translate to the window center.
Here's what I have:
<script>
$( document ).ready(function() {
$('.bbimage:hover').css('-webkit-transform','translate(500px, 500px)');
});
</script>
This doesn't appear to do anything and I'm not sure what I'm doing wrong. I'm really new to css, and moderately new to Jquery. Obviously, this is just a preliminary test to see if I can append the CSS, and I haven't calculated the window center yet.
The jquery .css method will add the styles on the element's style property and this cannot handle :hover events.
These should be added dynamicaly in a css stylesheet to work.
See here how to add dynamic stylesheet in javascript
I am trying to rotate a image only one corner.image is like a pole .bottom side should not be changed the position only top of the image should be animate either clockwise or anti clockwise.i have tried like this.i should work in IE8 also.i made left:53px because bottom should not be change the position.
<style>
.big-pole{
background-image: url("images/pole.png");
width: 55px;
height: 100px;
position: absolute;
top: 78px;
left: 53px;
}
</style>
<script>
TweenMax.to(".big-pole",3,{
top:'100px',
left:'53px',
});
</script>
You could apply CSS class to image without any need of external libraries.
.rotated {
transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-moz-transform: rotate(90deg); /* Firefox */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-o-transform: rotate(90deg); /* Opera */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* IE 8*/
}
I'm not really sure if I understand correctly what kind of rotation you are looking for? Is it like a clock as other users pointed out? Anyway your TweenMax call was missing some parameters in order for the rotation to work.
TweenMax.to($(".big-pole"), 3, {rotation:-90, transformOrigin:"top center"});
You will have test a few things and change a few value to find the correct animation, cause I might be wrong a bit, all depending on what you want to do in the end.
I don't have that much exp with css. I am testing the html in my iphone. The problem is that sometimes the div is not visible but still it responds to touches. When I debug in Safari by connecting it to a mac machine, it shows the div in the inspector but it is hidden on the device.
When I test the same on my ipad, And in portrait if my div is invisible and if I change the orientation, it becomes visible. I don't understand the magic thats happening here. Need some expert guidance on this. I want to display the HTML DIV and also need to enable touch. Please help.
Here is the css which I am using:
#container {
margin-left: 0px;
margin-top: -20px;
padding-right: 0px;
background-position: 0px -2px;
background-repeat: no-repeat;
position: absolute;
-webkit-transform-origin: 0px 0px;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.25, 0.1, 1.0);
background-color: yellow;
-webkit-transform-origin-x: 0px;
-webkit-transform-origin-y: 0px;
-webkit-transition-duration: 0ms;
-webkit-transform: translate3d(0px, 0px, 0px);
}
It can be done using CSS pointer-events
Try setting
div
{
pointer-events: none;
}
For different view ports (different screen widths), prefer using css through Media Queries, it's the preferred method these days.