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
Related
I have a website on which I'm showing a loading animation during page load using SVG and CSS3 animations. It works fine on Chrome and Firefox, but behaves incorrectly during page load on Safari 12.1.2
Until the page is fully loaded and the animation is over, the CSS animation won't have the correct duration, but instead will skip from one keyframe to the other without any transition. Once the page is loaded, the animations will start transitioning correctly between keyframes.
Here is a screencast of the issue: https://streamable.com/shca4
This is the CSS code I'm using for the animations. I use autoprefixer for browser support, but the issue is happening with safari 12.1.2 which should not be using a vendor prefix anyway.
#rightHand{
animation: rightHand 1s infinite 0s ease-in-out;
}
#leftHand{
animation: leftHand 1s infinite 0s ease-in-out;
}
#keyframes rightHand {
0%{
transform: translateX(0%) translateY(0%);
}
50%{
transform: translateX(5%) translateY(5%);
}
100%{
transform: translateX(0%) translateY(0%);
}
}
#keyframes leftHand {
0%{
transform: translateX(0%) translateY(0%);
}
50%{
transform: translateX(-5%) translateY(-5%);
}
100%{
transform: translateX(0%) translateY(0%);
}
}
Not sure if relevant, but I'm using the following code to add some body classes once the page is loaded to hide the animation:
$(window).on('load', function(){
$('body').removeClass('is-loading');
$('body').addClass('dom-loaded');
});
There are no errors in the console. Any idea why this is happening?
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
What I am trying to do is depending on a variable I get, change the 100% rotate value in the keyframe to the new calculated value. I have no problem with using Javascript to do this, but I want it to be done in the External CSS, not inline, once changed I need to restart the animation for that time. Is this possible? If so, how? (NOTE ALL DONE CURRENTLY THROUGH BUTTON CLICK) this is not to be saved, only done to update the graphic with a new position.
.arrow {
-webkit-animation: rotate 3s linear 0 1;
animation: rotate 3s linear 0 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-play-state: paused;
animation-play-state: paused;
visibility: visible !important;
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Any help will be much appreciated! I have been trying to find something that would work for about a week now.
It is possible to change keyframes on loaded stylesheets. Here you have a stack overflow answer from 2011. And here's a link to a recent blog post about it.
So, as adeneo mentioned, it is not possible to make javascript change an external style sheet.
The thing you can do is make 2 css classes and use javascript to change the class. This way you are not using inline styles.
Also, because you are changing the class, the animation will begin from the start - as you want it.
I'm trying to find out how does medium do the animation when you click the bottom button to load the next article.
To see it, please head over to a Medium article, scroll to bottom and click to go to the next article.
I know how to use AJAX to load another page, but how can I use a similar animation ? I've searched through their code, but couldn't find it.
is similar to jquery pop effect
http://view.jquerymobile.com/1.3.2/dist/demos/widgets/transitions/
try pop effect on page.
it is just a css transition combination of scale and fade;
You can try to achieve the same effect using combination of css-animations and javascript. As a starting point you can look at effeckt.css it's a collection of css animations. Unfortunately it doesn't contain exact animation, so I've tried to reproduce it in this fiddle
The basic idea is to use two effects scaleDownFromFront and slideFromBottom:
#keyframes scaleDownFromFront {
to {
-webkit-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
}
#keyframes slideFromBottom {
from {
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
}
I am trying to make the element rotate 45ยบ on click action, the toggle element should open.
If you click on it again I want it to rotate back and the toggle element should close.
I have tried a lot of codes, I would like to keep it as simple as possible.
Plugin I am using
jQuery:
$(".category-desc-toggle").click(function () {
$('.category-desc').slideToggle(300);
$(".category-desc-toggle").toggleClass("rotate45");
});
Css:
.rotate45 {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.category-desc-toggle {
-moz-transition: all .3s;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
What am I doing wrong? Is there an easier way(Less code)?
Indeed JuanT is right that CSS3 can accomplish the transformation, See Firefox MDN Link for more info.
jsFiddle: http://jsfiddle.net/7K6GP/4/
<div class="description-wrapper">
<div class="category-desc-toggle rotate"></div>
<div class="category-desc">Just Some Description</div>
</div>
<script>
$(".description-wrapper").click(function() {
$(this).children('div.category-desc').slideToggle(300);
$(this).children('div.category-desc-toggle').toggleClass("rotate45");
});
</script>
Without knowing your requirements, its hard to give you a full answer. Though, this can be accomplished with css3's rotate and transition property.
transform: rotate(45deg);
I have created a jsfiddle demonstrating this. http://jsfiddle.net/hGZbW/
EDIT:
If anyone is trying to accomplish this without CSS, there is a jquery plugin that supports most major browsers. To accomplish this affect for IE you would need to use the matrix filter.
https://github.com/heygrady/transform/wiki