Making some simple animation using CSS and JS for UIWebView; testing and debugging with Chrome;
For animation using this style:
-webkit-transition: opacity 1s ease-out;
setting Opacity from 0 to 1;
Everything looks fine except the final state of animation, when last animated element () appears, a random block of text on the page gets a little bolder.
Already tried different solutions:
-webkit-backface-visibility: hidden;
-webkit-perspective: 1;
-webkit-font-smoothing: antialiased;
opacity: 0.999;
Nothing helps.
after reading other discussions about problems with animations, tryed to use this solutions:
.flick-fix
{
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
but this class should be applied to the element wich behavior is looks strange, instead of the animated object;
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.
Is there any known issue when making a CSS transition to elements inside columns?
I've problems in webkit (Safari and Chrome), didn't test others...
I've made a simple demo where a transition is applied (on hover) to a image that sits inside columns. The problem happens on all columns except the first, it won't render the applied filter or the transition.
The first column works as expected, and if I remove the columns also render ok.
This is a relevant part of the CSS:
#photos img {
width: 100% !important;
height: auto !important;
opacity: 1;
-webkit-filter: blur(0);
-webkit-transition: all 200ms ease-in;
}
#photos div:hover img {
opacity: 0.25;
-webkit-filter: blur(2px);
-webkit-transition: all 200ms ease-in;
}
If you need "absolute" positioned elements in the columns, you will need that "relative" postition.
At Google Code there is a solution under "Issue 177556: Opacity transitions fail in CSS columns"
Don't remove position:relative, just add this:
-webkit-column-break-inside:avoid;
-moz-column-break-inside:avoid;
-o-column-break-inside:avoid;
-ms-column-break-inside:avoid;
column-break-inside:avoid;
-webkit-backface-visibility:hidden;
Chrome Version: Version 35.0.1916.114 m
EDIT : You can also add :
display:inline-block;
(it solved one of my issues, when using :after css selector on child elements.)
Apart from the rendering/flickering problems due to the columns, I figured out that the position:relative; of your divs cause the transition render problem.
If you want to keep up with this layout try to style the div content without position:absolute;.
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;
}
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/