.circular-menu.active .menu-item:nth-child(4) {
transform: translate3d(-7em,1em,0);
transition: ease;
}
I got this code for my menu-item with a tag. The transform effect works but the transition won't work.
You need to set a duration for your transition, otherwise by default it's 0s. Try this
.circular-menu.active .menu-item:nth-child(4) {
transform: translate3d(-7em,1em,0);
transition: all 0.3s ease;
}
it'll animate all the effects you change with a duration of 300ms
Related
I have transform scale on image, and set on hover duration 5s, but when I move mouse from image my image don'thave ease out duration of 5s , i think you understand me.
http://jsfiddle.net/oqa88vdo/
HTML
<img src="http://spmhire.com/wp-content/uploads/2014/11/rolls-royce.jpg">
CSS
img{
width:150px
}
img:hover{
transform: scale(2,3);
transition: transform 1500ms ease;
}
i tried to set
transition: 500ms ease-out 1s; but not working
You need to apply the transition to the element itself, rather than the :hover psuedo-class:
img {
width:150px;
transition: transform 1500ms ease-in-out;
}
img:hover{
transform: scale(2,3);
}
See: http://jsfiddle.net/oqa88vdo/3/
The reasoning behind this is that CSS transitions define how changes to the element will be applied going forward. You first set the transition behavior on the element, then any CSS that changes will use that transition behaviour.
The developer guides at Mozilla cover this very well, it's worth a read.
You need to set the parameters in the non hover style as well, like so:
https://jsfiddle.net/oqa88vdo/
img{
width:150px;
transform: scale(1,1);
transition:transform 1500ms ease;
}
img:hover{
transform: scale(2,3);
transition: transform 1500ms ease;
}
<img src="http://spmhire.com/wp-content/uploads/2014/11/rolls-royce.jpg">
I'm attempting to create a CSS transition when an element receives a certain class. So far the toggle change works (which means that ng-class is working properly), but the animation doesn't happen.
Here's my code:
.intro-text{
height:auto;
-webkit-transition: height 200ms ease-out;
-moz-transition: height 200ms ease-out;
-o-transition: height 200ms ease-out;
transition: height 200ms ease-out;
}
.intro-text.hide{
height:0;
}
And the HTML:
<div class="intro-text" ng-class="{'hide':clicked}">
<h1>Howdy stranger!</h1>
<h3>Use the form below to search for an artist and start building your record collection!</h3>
</div>
What am I missing?
EDIT: I've narrowed the problem down to bootstrap. If I include the bootstrap.min.css, the animation doesn't work, without it, it works perfectly. Any idea why guys?
EDIT 2: Fixed it! The problem is that both .hide and .hidden are classes defined in Bootstrap, so it was overriding my styles, parsing a display:none; before the animation was visible. When changed the class to another name, it got fixed : )
Actually your issue is not about Angular + ng-class, but about a css3 transition between height: auto and height: 0.
Here is a SO question about this: http://jsfiddle.net/Y3uxy/
The solution is to do the transition on max-height instead of height, and to set max-height to something big enough.
.intro-text{
max-height:999px;
overflow: hidden;
-webkit-transition: max-height 200ms ease-out;
-moz-transition: max-height 200ms ease-out;
-o-transition: max-height 200ms ease-out;
transition: max-height 200ms ease-out;
}
.intro-text.hide{
max-height:0;
}
Here is a demonstration: http://jsfiddle.net/Y3uxy/
I have a div with fixed height and width and upon clicking the label(checkbox trick) I expand the div to 100% width and height. That works, however the issue is in the transition.
I wish to create a easing transition where first the width expands and then the height expands. However upon defining the transitions the easing doesn't happen, instead it's like transition timing function goes to step-end. The transition happens instantly without easing(even though the delay on height transformation works).
tl;dr: The transition loses smoothness
Example: jsFiddle
The properties can not be transitioned from different "metrics".
In the base state, you specify height in px; in the changed state, you specify it in percentage. That won't work.
You can set it to work somehow with some tricks, that are not fully satisfactory; the best of them is to use max-height to do the change
#cbox {
display:none;
}
.someDiv {
background: blue;
color: white;
width: 200px;
max-height: 100px;
overflow: hidden;
height: 100%;
transition-property: width, max-height;
transition-duration: 2000ms;
transition-timing-function: ease;
transition-delay: 0, 2000ms;
}
#cbox:checked + div {
width: 100%;
max-height: 1000px;
}
I have also writen the transition in a way that can save you some typing when using multiple properties; notice that I can write ease only once
fiddle
You should separate properties with comma, instead of writing them in same line, try this
CSS
-webkit-transition: width 200ms ease 0s, height 200ms ease 200ms;
-moz-transition: width 200ms ease 0s, height 200ms ease 200ms;
-ms-transition: width 200ms ease 0s, height 200ms ease 200ms;
-o-transition: width 200ms ease 0s, height 200ms ease 200ms;
transition: width 200ms ease 0s, height 200ms ease 200ms;
It's pretty easy to enable CSS transitions for a single style, but is it possible to disable them for a single style?
The usual method for single-style transitions is:
div
{
transition: opacity 0.5s;
}
but what I'd like to do is set a global transition, then disable it for a single property. Maybe something like this?
div
{
transition: 0.5s opacity 0s;
}
Is that possible in any way?
EDIT
I don't want to disable ALL transitions for an element, I want to disable ONE transition for an element. i.e. I want all properties to transition EXCEPT opacity.
Here's a fiddle to demonstrate: http://jsfiddle.net/jakelauer/QSJXV/
It seems that you can emulate the needed behavior by setting a very short transition-duration for that one property (see fiddle):
transition: all 3s ease, background-color .01s linear;
I solved this. Example here: http://jsfiddle.net/jakelauer/QSJXV/1/
It works exactly how I thought it should, except I was missing a comma. Correct code example:
transition: 0.5s, opacity 0s;
-webkit-transition: 0.5s, opacity 0s;
You could use the :not pseudo-selector to exclude those elements which you mark with a class that shouldn't have the transition.
div {
opacity: 1.0;
...
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
// Change state for example
div:hover:not(.disable-transition) {
opacity: 0.5;
}
.disable-transition {
// Manually maintain the opacity so there is no change
opacity: 1.0;
}
I'm creating a simple web page and I'm having trouble adding a fade animation to the css when the background image is changed. I know I need to use something along these lines but whenever I try it, it doesn't seem to work...
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
I'll put a link to my css and html below, if anyone could take a look, I would be very grateful :)
CSS: http://pastebin.com/9k1tSiAE
HTML: http://pastebin.com/2K7GFWjN
The problem is you are changing the background image in addition to simply changing properties on the background itself. I've setup a fiddle with some random background tiles. You'll see the background slides but the image changes immediately without a transition:
http://jsfiddle.net/jimjeffers/a2jAF/
You'll need to settle on one image for the background but right now you have three:
background-image:url(nav-bg-initial.png);
background-image:url(nav-bg-secondry.png);
background-image:url(nav-bg-tertiary.png);
You'd need to condense those into one sprite. But once you apply a transition to background and adjust the background position, the background slides rather than fades. So depending on the effect you're going for - transitioning the background may not be the best option for you.
Instead -- what you may need to do is use some nested empty container elements. It's not semantically nice but it could achieve what you want if you want to use CSS transitions to perform a cross fade.
<ul id="navigation-list">
<li><a class="navigation-button" id="nav-button-1" href="#">HOME</a><span class="initial"></span><span class="secondary"></span><span class="tertiary"></span></li>
...
</ul>
The CSS then would be:
.navigation-button { position: relative; }
.initial, .secondary, .tertiary {
bottom: 0;
left: 0;
opacity: 0;
position: absolute
right: 0;
top: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
z-index: -1;
}
.initial { background-image:url(nav-bg-initial.png); }
.secondary { background-image:url(nav-bg-secondry.png); z-index: -2; }
.tertiary { background-image:url(nav-bg-tertiary.png); z-index: -3; }
And then you'd toggle their appearances like this:
#navigation-buttons:hover #nav-button-1 .tertiary { opacity: 1; }
It's a bit more work but you'd have to do something along those lines to cross fade different background images at various positions without getting a slide effect.