Using flickity carousel I've created the following example here in codepen.io link. Here is CSS code I've implemented:
CSS
.image-hoover {
overflow: hidden;
}
.image-hoover img {
-moz-transform: scale(1.02);
-webkit-transform: scale(1.02);
transform: scale(1.02);
-webkit-transition: all 10s ease;
-moz-transition: all 10s ease;
-o-transition: all 10s ease;
-ms-transition: all 10s ease;
transition: all 10s ease;
}
.image-hoover:hover img {
-moz-transform: scale(1.06);
-webkit-transform: scale(1.06);
transform: scale(1.06);
-webkit-transition: all 10s linear;
-moz-transition: all 10s linear;
-o-transition: all 10s linear;
-ms-transition: all 10s linear;
transition: all 10s linear;
}
The issue I can't figure out is that images loose responsive behavior only until I turn off this part:
.image-hoover img {
-moz-transform: scale(1.02);
-webkit-transform: scale(1.02);
transform: scale(1.02);
-webkit-transition: all 10s ease;
-moz-transition: all 10s ease;
-o-transition: all 10s ease;
-ms-transition: all 10s ease;
transition: all 10s ease;
}
But in this case when you unhover the image returns back to it size very fast loosing the transition effect, can you please suggest how to figure out this issue?
1. Here the responsive behavior of image is present, but zoom effect on hoover loose transition.
2. In this example you can notice that transition works great, but if you resize the window images loose their responsive behaviour.
It happens because you said for the transition to apply on all actions, so the 10s transition happens also when the images change thier when the screen changes width.
You will need to change
-webkit-transition: all 10s ease;
-moz-transition: all 10s ease;
-o-transition: all 10s ease;
-ms-transition: all 10s ease;
transition: all 10s ease;
to
-webkit-transition: -webkit-transform: 10s ease;
-moz-transition: -moz-transform 10s ease;
-o-transition: transform 10s ease;
-ms-transition: transform 10s ease;
transition: transform 10s ease;
And remove the transition from the :hover.
This will now work.
Fiddle-http://codepen.io/anon/pen/eJWQRq?editors=110
Related
I wanted to change the background of Google Chrome auto-suggestion options!
I have tried the below code sniped and I change everything regarding suggestion, but I can not change the background of the options.
/* Browser autofill options */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:active,
select:-webkit-autofill:focus {
-webkit-text-fill-color: black;
transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
-webkit-transition: background-color 5000s ease-in-out 0s;
-moz-transition: background-color 5000s ease-in-out 0s;
-ms-transition: background-color 5000s ease-in-out 0s;
-o-transition: background-color 5000s ease-in-out 0s;
}
From the image I think this is bit clear that i want to change the background of the option for example here ["Mithun","Admin"].
I am developing a single-page Javascript application that runs on desktop browsers and also on mobile devices via Cordova/Phonegap.
I have a slide-out menu that is implemented using CSS transitions. I noticed that it works well on desktop browsers and android. However, on IOS there are serious performance issues. The transition does not appear to start on time, but once it starts the rendering and duration looks fine. The time between starting the transition and the transitionend event is way higher on IOS than other platforms. For example, the duration of the transition is 300ms but I'm not getting the transitionend event for 1500ms. On all other platforms, I get the transitionend event in 325-350ms.
Transitionend Event:
Expected: 350ms
Actual: 1500ms
Platforms:
Cordova 6.3.1
Xcode 8.1 GM Seed
IOS 10.1
Here is the CSS for the menu div. To slide-out the menu, I add the 'open' class. To close the menu, I remove the 'open' class. I've tried transitioning on the 'left' property and 'transform' property, but the results are identical.
/* Nav Menu */
#navmenu {
position: absolute;
top: 0;
width: 90%;
max-width: 400px;
z-index: 20;
height: auto;
background-color: white;
/*
-webkit-transform: translate3d(-100%,0,0);
-moz-transform: translate3d(-100%,0,0);
-ms-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
-webkit-transition: -webkit-transform 300ms ease;
-moz-transition: -moz-transform 300ms ease;
-ms-transition: -ms-transform 300ms ease;
-o-transition: -o-transform 300ms ease;
transition: transform 300ms ease;
*/
left: -100%;
-webkit-transition: left 300ms ease;
-moz-transition: left 300ms ease;
-ms-transition: left 300ms ease;
-o-transition: left 300ms ease;
transition: left 300ms ease;
}
#navmenu.open {
/*
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 300ms ease;
-moz-transition: -moz-transform 300ms ease;
-ms-transition: -ms-transform 300ms ease;
-o-transition: -o-transform 300ms ease;
transition: transform 300ms ease;
*/
left: 0;
-webkit-transition: left 300ms ease;
-moz-transition: left 300ms ease;
-ms-transition: left 300ms ease;
-o-transition: left 300ms ease;
transition: left 300ms ease;
}
Question: What might be causing the delay in starting the transition, only on IOS platforms? Are there any known solutions to circumvent the problem or speed things up? I have other transitions in the app that take over 5s to start, making the app unusable. I'm hoping the menu solution will apply throughout the app. Thanks for any help or ideas you can provide.
Here is the instrumented Javascript code that I use to open/close the menu...
utilities.addEventListeners(navMenuButtonDiv, function () {
var start = Date.now();
var menuDiv = navMenu.getDiv();
if (menuDiv.classList.contains('open')) {
menuDiv.classList.remove('open');
} else {
menuDiv.classList.add('open');
}
var handler = function (event) {
console.log('Transition: ' + (Date.now() - start));
menuDiv.removeEventListener('webkitTransitionEnd', handler, true);
};
menuDiv.addEventListener('webkitTransitionEnd', handler, true);
};
When moving elements around the screen, you want to maximize performance. Instead of transitioning the left property, you're better off using translation. Using translation, the device will use its GPU to render the onscreen change, on a layer above the DOM. This will result in a smoother, more performant transition.
Have a look at this example. Besides using a transform instead of changing the left property, notice that I removed a bit of redundancy. You don't need to redeclare the transition on the active state.
var open = document.getElementById("open"),
close = document.getElementById("close"),
nav = document.getElementById("navmenu");
open.addEventListener("click", function() {
nav.classList.add("open");
});
close.addEventListener("click", function() {
nav.classList.remove("open");
});
#navmenu {
position: absolute;
top: 0;
left: 0;
width: 90%;
max-width: 400px;
z-index: 20;
height: auto;
background-color: white;
transform: translate3d(-100%, 0, 0);
-webkit-transition: transform 300ms ease-in-out;
-moz-transition: transform 300ms ease-in-out;
-ms-transition: transform 300ms ease-in-out;
-o-transition: transform 300ms ease-in-out;
transition: transform 300ms ease-in-out;
}
#navmenu.open {
transform: translate3d(0, 0, 0);
}
button {
margin-top: 100px;
}
<div id="navmenu">stuff in here</div>
<button id="open">Open Menu</button>
<button id="close">Close Menu</button>
i have a logo image in sticky topbar menu so when scrolling down i'm trying to change the image width using css transition but it is not working with jquery window scroll when i add the css class to logo image but when i hover on the logo image it work
my code css
.logo img
{
width: 100%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
.transition , .logo img:hover{
width: 50%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
js code
$j = jQuery.noConflict();
$j(function(){
$j(window).on("scroll", function () {
if ($j(this).scrollTop() > 100) {
$j('.logo img').addClass('transition');
console.log($j(this).scrollTop());
} else {
$j('.logo img').removeClass('transition');
console.log('cvc');
}
});
});
please any help and many thanks in advance.
You wants something like this ?
Just changed your selectors a bit. Because of the inheritance of .logo img, .transition wasn't suffisant to erase .logo img properties.
.logo img
{
width: 100%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
.logo .transition{
width: 50%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
I'm trying to change the opacity of the hover effect at http://3e6.864.myftpupload.com/. I tried changing the opacity in CSS, but it doesn't seem to take effect.
.isotope .isotope-item {
filter: alpha(opacity=90);
opacity: 0.9;
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
}
If you're trying to achieve this effect on hover of the element you need to use the :hover selector in your CSS and set the transition attribute:
.isotope .isotope-item:hover {
filter: alpha(opacity=90);
opacity: 0.9;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
}
Example fiddle
I have:
<div class="button" id="button1">Click</div>
<div class="button" id="button2">Click</div>
and the JS
$('.button').click(function(){
$('.button').removeClass('selected');
$(this).addClass('selected');
});
CSS
.selected {
background-color: green;
}
Can I 'animate' the applying of the class 'selected'? I.e on a click of the div, the background slides in from the right or fades in for example? Is there a decent plugin available that could achieve this? Is there are a CSS workaround/method?
Simply use CSS3
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
Example
http://jsfiddle.net/tw16/JfK6N/
if you don't want to use CSS3 to support older Browsers use the done() callback of animate
$('.button').click(function() {
$('.button').removeClass('selected');
$(this).animate({
backgroundColor: green
}, 1000, "linear", function() {
$(this).addClass('selected');
});
});
You can use css3 for that. Use transition to background color change.
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
Here is the example with your code:
http://jsfiddle.net/mm9mV/