I have one issue regarding overlay technique in CSS. I use :target element to display a div which have initially width:0 and height:0. But this new div disappear once I put my mouse out of the browser window.
You can check my code on that page, click on a thumbnail and move your mouse outside the browser window and see what happen:
http://wang-chang.com/test/photos/galerie-photos.html?aid=355194617939727
If anyone get any idea, it will be very appreciate :)
Thanks in advance.
which div are you talking about? the one with id mask?
you are only changing the opacity in hover
.view-sixth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
found in
http://wang-chang.com/test/photos/css/style6.css
so when you move the mouse out, the opacity returns back to 0.
Related
How to create this kind of css animation where element fades in from the bottom but appears like clipped with overflow:
http://fr.creasenso.com/ (see the breadcrumb text)
I've tried all the basics but not going anywhere with translateY. Do I need to go to libraries or is it achievable with css only?
The wording of your question could use some improvement. But besides that, I think this is what you are looking for:
https://jsfiddle.net/5ws33c8s/
You need a parent element which has a overflow: hidden. Followed by the childs which are moved out using translate: translateY().
I then used css keyframes to move it back in:
animation: fadeInText 300ms 0ms forwards;
#keyframes fadeInText {
from {
transform: translateY(30px);
opacity: 0;
} to {
transform: translateY(0);
opacity: 1;
}
}
This animation is set up as follows; fadeInText is the keyframes name, 300ms is the duration of the animation, 0ms is the delay of said animation and forwards remembers the final state of the animation, and leaves the element as such. Without it, the element would jump back to its original values.
I then used a delay on each child element.
span:nth-child(2) {
animation-delay: 150ms;
}
This HTML element had a nice transition effect when it was clicked. However when I added another class with animation property, transition was lost. Look at the demo: http://codepen.io/kunokdev/pen/rewveJ
<div
class="main-menu-item zoom-in-entrance">
Test
</div>
Do animation and transition properties not stack?
#keyframes zoom-in-entrance
from
opacity: 0
-webkit-transform: scale3d(.3, .3, .3)
transform: scale3d(.3, .3, .3)
50%
opacity: 1
.zoom-in-entrance
-webkit-animation: zoom-in-entrance .25s forwards
animation: zoom-in-entrance .25s forwards
.main-menu-item
cursor: pointer
background: $white
transition: all .25s
&:active
+scale(0.95,0.95)
i, span
display: block
Animation from animation property only happens on page load and never again, however animation from transition happens only when an element is clicked.
How do I make them both work?
Both your animation and transition properties are trying to affect scale. This is because you have specified forwards as the animation fill mode.
Since your animation ends on the "default" state of the item, you can use none instead, and the animation will not hold the scale at 1.0, allowing the transition to take effect:
-webkit-animation: zoom-in-entrance .25s none
animation: zoom-in-entrance .25s none
(you can also just leave out none as it's the default fill mode)
Updated pen: http://codepen.io/anon/pen/XdgqNq
If you remove the forwards which persits the final state of the animation it works fine.
If you can use js, you could remove zoom-in-entrance class after animation is finished.
Callback when CSS3 transition finishes
I am not quite sure how to use CSS3 transitions to do what I want. I'm new to using them so I could really use some help :)
Here is the JSFiddle with what I'm working on.
So, basically the div.portlet is supposed to be a window showing what is in the explode. WHen you click on the portlet, I want it to grow to fill up the div.container. And when you close I want it to shrink back to its normal size.
fade isnt transact property either you need to definde like fadeIn defined below you can do this by
as in your comment
try
div.portlet
{
transition: ease-out 2s;
-moz-transition: ease-out 2s; /* Firefox 4 */
-webkit-transition: ease-out 2s; /* Safari and Chrome */
-o-transition: ease-out 2s; /* Opera */
}
and add z-index:3; to div.portlet and z-index:4 to class open
and jquery
$(".container").on("click", ".portlet", function(){
$(".portlet").css("z-index","3");
$(this).addClass("open");
$(this).css("z-index","333");
});
});
How can i display a easing effect, opening from the left, when the page is open? Like this site: http://focuslabllc.com/
I would use CSS transitions. Take a look at the example I've created http://jsfiddle.net/ZL9m7/1/
Relative CSS is simple as
.container {
opacity: 0.1;
transition: opacity 1s linear;
-webkit-transition: opacity 1s linear; /* Play with timing functions */
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
}
.container-ease-in {
opacity: 1;
}
And tiny javascript trigger (jQuery for convinience):
$(function() {
$('.container').addClass('container-ease-in');
});
Like in dfsq-answer the animation will be triggered with a class by js (this time without jquery):
window.onload = function() {
var oElement = document.getElementById('content');
oElement.className = oElement.className + ' start_animation';
};
And the css changes the margin and the opacity with transition(-duration):
#content {
...
/* starting status */
margin: 10px 200px 10px 0px;
opacity: 0;
/* now set the animation duration */
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
}
#content.start_animation {
margin: 10px 100px; /* change horizontal margins */
opacity: 1; /* change opacity */
}
Also see this example.
This is the fella who wrote the js for the site you're referencing. I played with CSS as an option for this but ended up just going with jQuery 100%. I'll have a blog post soon about some of the dev aspects of our new site facelift and I'll talk about how we did that. It will inclue some jsFiddle demos etc.
You can hide your content initially (with CSS) and then, once the page content is loaded, use javascript to trigger/run an easing operation to make things visible.
Or, you can start with no content and build the page content with javascript in a way that reveals it with the easing you want.
You can use JQuery animation or YUI transition to achieve this. Hide the div and show it OR set the width to 0 and then animate it to maximum with a specific duration.
I am trying to make some kind of animation and I want it to happen without :hover :active or any other event. I want it to happen after 2 second page loads. In fact, I want the object come from invisible place to scene (visible area). Is there anyway of doing it ?
#scene {width:650px;height:300px;border:1px solid black;background-color:#FAFAFA;margin:0 auto;}
#sca {transition: background 2s;width:271px;height:180px;background: url(http://img521.imageshack.us/img521/7913/123hc.png) no-repeat;display:block;position:relative;right:300px; opacity:0.5;
transition: opacity 2s;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s; /* Opera */
transition-delay: 2s;
-webkit-transition-delay: 2s;
}
#sca:hover {opacity:1; }
Yes it's possible, but it's not recommended. How to do it with pure CSS is shown at this site. Here is the demo provided at the site.
A more cross-compatible way of doing it would be using javascript or jQuery, specifically jQuery's ready combined with animation or more generally, effects.
Good luck!
CSS transitions work on events, and there's not any way around that. You'd have to use Javascript to do what you are looking for.
There is difference between transition (from title) and animation (from text). animation can have start without an event, but transition can't.