I have a scenario where on button click transition should happen
transition-property: top, left;
transition-duration: 10s;
transition-delay: 0s;
-webkit-transition-property: top, left;
-webkit-transition-duration: 2s;
-webkit-transition-delay: 0s;
-moz-transition-property: top, left;
-moz-transition-duration: 2s;
-moz-transition-delay: 0s;
-ms-transition-property: top, left;
-ms-transition-duration: 2s;
-ms-transition-delay: 0s;
transition-timing-function: ease;
These are the transitions which were applied .In chrome browser it is working good, but in IE-11 when tried the transitions aren't getting applied.
Any help would be appreciated.
If you have any meta tag please check it's on your meta same to
<meta http-equiv="X-UA-Compatible" content="IE=9;IE=10;IE=Edge,chrome=1"/>
on not same check it. Thank you.
Related
So I'm building a page that has a background image:
body {
background:url(images/bg.png) center center no-repeat fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover
}
The page loads with a div that looks like a alert/message. When this div loads I want a short animation of the background-image getting darker,
Right now I use this:
back {
background:rgba(0,0,0,.95);
display:block;
height:100%;
left:0;
opacity:1;
position:fixed;
top:0;
width:100%
}
This makes it darker, but I want this to happen gradually in a smooth transition/animation.
You can use #keyframes for this. I don't know what your HTML looks like, but here's a little demo:
.back {
background:rgba(0,0,0,.95);
display:block;
height:500px;
left:0;
opacity:1;
position:fixed;
top:0;
width:500px;
}
#keyframes back-change {
from { background: rgba(133,133,133,.95) }
to { background: rgba(0,0,0,.95) }
}
.back {
animation: back-change 4s linear;
}
<div class="back"></div>
I set it to change from light to dark over 4s in a linear pattern. You can change the duration or change the pattern to whatever you want (none, infinite, etc.).
Notice that the name back-change that follows the #keyframes word is what you'll have to call in the the animation property later on. If you change the name in one spot, you'll have to change it in both.
Here's a JSFiddle Example as well for messing around with on your own.
You can also use CSS3 Transitions as well. These have been supported a little longer in web browsers.
.back {
background:rgba(0,0,0,.95);
display:block;
height:500px;
left:0;
opacity:1;
position:fixed;
top:0;
width:500px;
transition-property: background-color;
transition-duration: 0.3s;
}
.back:hover {
background-color: rgba(133,133,133,.95);
}
<div class="back"></div>
Again, here's a JSFiddle Example for you to play with.
You can use simple css transition and jQuery addClass() method only to set element class attribute.
JS
$( window ).load( function() {
$( '.overlay' ).addClass( 'dark' );
});
CSS
.overlay {
background-color: rgba(0,0,0,0);
transition: background-color 1s ease;
}
.dark{
background-color: rgba(0,0,0,.95);
}
FIDDLE
This is a job for a transition, not an animation:
In this example I'll change the opacity to fade out when you hover over it...
.TransitStyle {
background:rgba(0,0,0,.95);
display:block;
height:100%;
left:0;
opacity:1;
position:fixed;
top:0;
width:100%
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-ms-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.TransitStyle:hover {
opacity: 0.0;
}
I'm having issues while building my new website.
I have a mobile nav that shows up whenever your browser is small enough (I believe under 940px wide) and it works fine on Chrome and other webkit browsers, but in Firefox and IE the transitions don't work and nothing transforms the way I want it to. I'm not really sure why this is and could use help.
Here's a link to the site: http://teamreest.com/
EDIT: I am using the specific vendor prefixes, yet it still does not work.
More specifically relating to this:
.overlay{
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: $main-color;
overflow: auto;
z-index:100;
font-size:50px;
font-weight:300;
min-height:400px;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-ms-transition: -ms-transform 0.4s;
transition: -transform 0.4s;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.overlay.show {
opacity:1;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
Also this:
.container{
height:100%;
opacity: 1;
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
-ms-transition: -ms-transform 0.4s, opacity 0.4s;
transition: -transform 0.4s, opacity 0.4s;
}
.container.show {
opacity: 0.5;
-webkit-transform: translateX(30%);
-moz-transform: translateX(30%);
-ms-transform: translateX(30%);
transform: translateX(30%);
}
I found the issue in my code.
The transition as seen here:
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-ms-transition: -ms-transform 0.4s;
transition: -transform 0.4s;
And here:
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
-ms-transition: -ms-transform 0.4s, opacity 0.4s;
transition: -transform 0.4s, opacity 0.4s;
Are problematic. As seen, the regular transition property has an issue.
That issue can be seen as there is a dash in front of the transform property of the transition. By removing this the problem is solved.
When you mouse over either image, each rotates 360 degrees and changes from 50% to 100% opacity revealing image text below. I am trying to rotate the opposite image from which I hover over to simulate turning gears.
See Fiddle here.
#navBlueGear {
float:left;
transition: opacity 1s;
opacity:0.5;}
#navBlueGear:hover {
opacity:1.0;}
#aboutMe {
position:relative;
float:left;
top:130px;
left:-80px;
opacity: 0;
-webkit-transition: 1.5s;
-moz-transition: 1.5s;
-o-transition: 1.5s;
transition: 1.5s;}
#navBlueGear:hover ~ #aboutMe {
opacity: 1;}
.aboutLink {
-webkit-transition:all 1.5s ease-out;
-moz-transition:all 1.5s ease-out;
-ms-transition:all 1.5s ease-out;
-o-transition:all 1.5s ease-out;
transition:all 1.5s ease-out;}
.aboutLink:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
#navOrangeGear {
position:relative;
float:left;
top:85px;
left:-75px;
transition: opacity 1s;
opacity:0.5;}
#navOrangeGear:hover {
opacity:1.0;}
#work {
position:relative;
float:left;
top:176px;
left:-143px;
opacity: 0;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;}
#navOrangeGear:hover ~ #work {
opacity: 1;}
.workLink {
-webkit-transition:all 1.5s ease-out;
-moz-transition:all 1.5s ease-out;
-ms-transition:all 1.5s ease-out;
-o-transition:all 1.5s ease-out;
transition:all 1.5s ease-out;}
.workLink:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
Is it possible to turn the opposite gear counter to the image you initially hover over as well as control the speed as the teeth of each need to look realistic?
Is it possible in CSS3 and if not how would I accomplish this in JavaScript? Any other suggestions or advice is appreciated, I am just beginning to work with writing code, thank you in advance.
Try this solution
http://jsfiddle.net/BRGG2/30/
I put all elements in a containing div and set the rotation to work when that div is hovered.
Each gear keeps its own opacity and hover link.
I set the second gear to turn the opposite way using this
#container:hover .workLink {
-webkit-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-ms-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
transform:rotate(-360deg);
}
As to calibrate both gears speed, this will take some fine tuning, using -webkit-transition-duration.
I'm trying to preserve the current height of the page when doing an Ajax call. Almost the whole content is hidden before showing the new content, so the browser scrolls to the top of the page because there is no content below during the transition.
linksPages.on('click',function(e){
e.preventDefault();
jQuery.post(MyAjax.url, {action : 'ajax' ,href : $(this).attr('href') }, function(response) {
$('#content').fadeOut();
setTimeout(function() {
$('#content').html(response).fadeIn();
}, 500);
});
});
I thought about adding a class like:
linksPages.on('click',function(e){
e.preventDefault();
jQuery.post(MyAjax.url, {action : 'ajax' ,href : $(this).attr('href') }, function(response) {
//$('#content').fadeOut();
$('#content').addClass('cortinaIn');
setTimeout(function() {
$('#content').html(response).fadeIn();
$('#content').removeClass('cortinaIn');
$('#content').addClass('cortinaOut');
}, 500);
$('#content').removeClass('cortinaOut');
});
});
and define the cortinaIn and cortinaOut CSS rules:
.cortinaIn {
transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
transition-duration: 0.3s;
transition-timing-function: ease-out;
transition-delay: 0.1s;
-moz-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-moz-transition-duration: 0.3s;
-moz-transition-timing-function: ease-out;
-moz-transition-delay: 0.1s;
-webkit-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: 0.1s;
-o-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-o-transition-duration: 0.3s;
-o-transition-timing-function: ease-out;
-o-transition-delay: 0.1s;
transform:scale(0, 1);
transform-origin: center center;
-ms-transform:scale(0, 1); /* IE 9 */
-ms-transform-origin: center center;
-webkit-transform:scale(0, 1); /* Safari and Chrome */
-webkit-transform-origin: center center;
-o-transform:scale(0, 1); /* Opera */
-o-transform-origin: center center;
}
.cortinaOut {
transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
transition-duration: 0.3s;
transition-timing-function: ease-out;
transition-delay: 0.1s;
-moz-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-moz-transition-duration: 0.3s;
-moz-transition-timing-function: ease-out;
-moz-transition-delay: 0.1s;
-webkit-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: 0.1s;
-o-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-o-transition-duration: 0.3s;
-o-transition-timing-function: ease-out;
-o-transition-delay: 0.1s;
transform:scale(1, 1);
transform-origin: center center;
-ms-transform:scale(1, 1); /* IE 9 */
-ms-transform-origin: center center;
-webkit-transform:scale(1, 1); /* Safari and Chrome */
-webkit-transform-origin: center center;
-o-transform:scale(1, 1); /* Opera */
-o-transform-origin: center center;
}
And this works fine, but I'm not able to find "fade in" and "face out" effects with CSS transforms. Any idea to achieve this behavior?
It's a lot simpler than you're making it.
linksPages.on('click',function(e){
e.preventDefault();
jQuery.post(MyAjax.url, {action : 'ajax' ,href : $(this).attr('href') }, function(response) {
$('#content').addClass('cortinaOut');
setTimeout(function() {
$('#content').removeClass('cortinaOut');
}, 500);
});
});
Then in your CSS, have this:
#content {
transition: opacity 0.3s ease-out;
opacity: 1;
}
.cortinaOut {
transition: opacity 0.3s ease-out;
opacity: 0;
}
Here's a fiddle showing what I mean.
using css visibility:hidden will hide the element (as if opacity:0) but will still take space and elements will flow around it, thus preserving the height of its container element.
Problem is that jQuery automatically does a display:block/display:none when using its fadeIn/out methods. I'd either use a jquery plugin (don't know one, but there are many) or directly use css3 transitions and roll your own function (most effective and efficient).
Right, I have a div with text in it, When I hover over the text it fades to red and has a margin left of 4px, It also has a image of a star next to it, what I want to achieve is to make the star spin when the text is hovered over but still have it turn red and have a margin left of 4px, any ideas?
Fiddle: http://jsfiddle.net/vPAcF/
CSS:
span.red:hover {
color:#C42626;
-webkit-transition:color 0.5s ease-in;
-moz-transition:color 0.5s ease-in;
-o-transition:color 0.5s ease-in;
transition:color 0.5s ease-in;
}
span.red:hover .star {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-0-transform: rotate(45deg);
transform: rotate(45deg);
}
.star {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transform: rotate(0deg);
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.star:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
span.red {
color:#CCC;
-webkit-transition:color 0.5s ease-in;
-moz-transition:color 0.5s ease-in;
-o-transition:color 0.5s ease-in;
transition:color 0.5s ease-in;
}