I am animating a heading on a site and the animation is working in firefox but not in chrome.
I have the correct prefixes in firefox, if you use this code and switch the prefixes to moz it animates absolutely fine in firefox, heres the code for chrome:
HTML
<div class="page-header-con">
<div class="page-header">
<h1>test</h1>
</div>
</div>
CSS
.page-header-con {
perspective: 100px;
}
.page-header:hover {
-webkit-transform: rotateX(360deg);
}
.page-header {
-webkit-transition: all 0s ease 0s, all 1s ease 0s, all 0s ease-in 0s, all 0s ease 0s;
-webkit-transform: rotateX(0deg);
}
Am I missing something that is specifically needed for chrome?
Chrome doesn't seem to like the multiple transitions (not sure why you'd have them in the first place), so I kept removed all the ones that wouldn't do anything, aka all the ones with 0s duration. Firefox seems to ignore these other transition values
Updated jsFiddle
In addition, you need to play around with transform-origin (and the webkit prefixed version) in order to get the effect you desire. The default, for me is seems, in Firefox is top left, so if you want Chrome to look like that you need to put -webkit-transform-origin: top left; in the hover CSS for the element
More information on transform-origin
Related
I got a problem, I made a check mark CSS animation on my website, but they start on page load, and it shouldn't, it should only trigger on hovering / unhovering.
And the text need to collapse like (...) when the price goes above the description
All the code is available here: https://github.com/Douwdy/Projet-3
And you can get a preview here: https://douwdy.github.io/Projet-3/menu-1.html
Someone can help me to fix that ?
No Js Suggestion please
For CSS animations on page load your, I had a look at this and I would use transition & transform instead of animation
So if you remove the animations (check-box__in & check-box__out) in your css and replace with transitions below:
.menu-selector-box:hover .menu-selector-box__validator {
transition: transform 1s ease-out;
transform: translateX(-60px);
}
.menu-selector-box__validator {
transition: transform 1s ease-out;
}
.menu-selector-box-text__price {
transition: transform 1s ease-out;
}
.menu-selector-box:hover .menu-selector-box-text__price {
transition: transform 1s ease-out;
transform: translateX(-60px);
}
For the text issue I would suggest setting a width on menu-selector-box-text (I used 275px) and then on hover reduce the width (I used 225px), you can use the same transitions as above when reducing the width (transition: width 1s ease-out;)
Then the styles below need to be applied to the <h5> and the <p> tags.
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
In older versions of Edge, the desired transition effect works correctly.
I am simply animating a div by transitioning opacity/visibility with CSS when its parent's hover event is called.
//LESS
&:hover .inside{
//part that matters:
visibility: visible;
opacity: 1.0;
transition-delay:0s;
}
.inside{
//part that matters:
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 1s,opacity 1s ease;
}
//Pug
.wrapper
.button text
.inside more text
The problem.
In Chrome, IE 11, and Edge 25 the transition is consistent and correct. However, the transition events seem to be stacking up and making the opacity jump back and forth if I hover over or leave the button before the transitions complete naturally.
Here's an example of it: https://codepen.io/vtsells/pen/RZjLYP
Is this a bug or am I missing something? I find it odd that older versions of Edge work correctly
Your transition-delay:0s is causing the problems. Setting it to a very low value should give you a good result: transition-delay: 0.01s
Here's your working codepen.
I'm experiencing a very annoying bug which appears in Safari 5.1 on Mac. Since this browser is still very common I need to support it.
JSFiddle: http://jsfiddle.net/QCvZt/2/
On clicking a button, a class is added to a containing element #chance. The stylesheet has rules that then cause the clicked element #chance-loose-card to animate away with transitions immediately and then, after a delay, #chance-card animates in.
They fade out and in with opacity, and I flip visibility to hidden when they're totally transparent, since in the full site they might otherwise be over top of things and capturing clicks meant for elements below.
This works very well in Firefox and Chrome (and Safari 6).
But in Safari 5.1 on Mac the first animation is happening as expected but then #chance-card isn't appearing. It's not until I hover over the #carousel element (presumably it's because it triggers another transition -- a button fading in) that #chance-card makes its appearance.
Now, given my assumption that it's to do with another transition being triggered, I tried forcing a transition to happen every second via a Javascript setInterval flipping a class on an element, causing it to transit back and forth. But this did not unfreeze the transition and make #chance-card appear. Transitioning a transform: translate instead of margin-left on the #chance-card doesn't help either.
As noted in the JSFiddle, reducing the transition-delay on #chance-card does make the bug go away, but for my use case this isn't an acceptable solution.
I wonder if anyone can suggest any workarounds? I haven't found anything which sounds similar in my searches.
I found a solution!
http://jsfiddle.net/QCvZt/4/
Changing the transition-delay of the visibility property to just less than the delays of the other properties fixes the issue. So it seems that if transitions are delayed, if visibility is hidden at the time when the transitions start (even if it's going to flip to visible at that same moment), the transitions don't start until somehow triggered (like in this case with the mouse over the grey area, though I don't know exactly the mechanism). Flipping visibility to visible just before the other transitions are due to start makes the problem disappear.
In this case I changed this (vendor prefixes omitted)
#chance.state-chancecard #chance-card {
transition: transform 0.5s, opacity 0.1s, visibility 0s;
transition-delay: 0.5s, 0.5s, 0.5s;
transition-timing-function: ease-out;
transform: none;
opacity: 1;
visibility: visible;
}
to this
#chance.state-chancecard #chance-card {
transition: transform 0.5s, opacity 0.1s, visibility 0s;
transition-delay: 0.5s, 0.5s, 0.49s; /* flip visibility just before other transitions are to start */
transition-timing-function: ease-out;
transform: none;
opacity: 1;
visibility: visible;
}
I've got this transition working smoothly in chrome and safari but it is not working in firefox. In firefox it does not zoom in, but it shows the enlarged image instantly. Maybe somebody knows what's wrong...
I've made a jsfiddle for it: http://jsfiddle.net/WYfZz/
ul.polaroids_portfolio li a:hover { -webkit-transform: scale(1.75); -moz-transform: scale(1.75);
-ms-transform: scale(1.75);-o-transform: scale(1.75);transform: scale(1.75);
position: relative; z-index: 5; }
You have no -moz-transition: -moz-transform .15s linear; on ul.polaroids_portfolio a, you just have the -webkit- version.
See http://jsfiddle.net/WYfZz/5/
Also, you shouldn't forget to also put the unprefized version for transitions at the end as well (both transitions and transforms will be unprefixed in Firefox 16/ Opera 12.5/ IE 10). Same goes for box-shadow (you'd be better off using the unprefixed version instead of the prefixed ones; I can understand using the -webkit prefix to support Android or Blackberry, but Firefox supports the unprefixed box-shadow since FF4)
How to make images move automatically + on mouseover in CSS/HTML?
For example Ek Main Aur Ekk Tu Movie Site
It's actually really easy to do with CSS3:
.moveMe
{
width: 150px;
height: 40px;
background: #f01;
position: absolute;
top: 0;
-webkit-transition: top 2s;
-moz-transition: top 2s;
-o-transition: top 2s;
}
.moveMe:hover
{
top: 10px;
-webkit-transition: top 0.3s;
-moz-transition: top 0.3s;
-o-transition: top 0.3s;
}
This tells the element onHover to transition between the two states of top over a period of 2 seconds and 0.3 seconds when the mouse leaves.
Check it out here: http://jsfiddle.net/HGjQC/'
As this is a CSS3 technique, the code here will only work in webkit browsers (Chrome, Safari, any other browser using the Chromium engine [Rockmelt]), Opera and Mozilla browsers.
For IE, yoy'll probably need to use Javascript for now until MS decides to implement more CSS3.
It uses something called parallax effect. I found a jquery plugin that seems to help do this kind of effects. The plugin is called Plax, here is the demo
you could make an invisible div, and then use the query .attr() tag to change the image on hover. I'm not sure I get your question though, because I couldn't find the site that wanted to base yours off of.
Maybe you can use JavaScript, like this:
http://jsfiddle.net/HGjQC/2/