I'm trying to get a css background color to fade out right after the page loads without any user interaction. Can this be done?
This can be done using CSS animations. There is a property animation-delay which can be set in seconds.
animation-delay: 2s;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
Here is a simple example of a background fading after 2 seconds: http://jsfiddle.net/eKAf2/
Personally I'd have the background set in CSS. Then modify the document with jQuery. So I'd set the background color
CSS
body {
background: #009dff;
}
Then set the background color that the page fades into, and add the transition
JS
$(document).ready(function() {
$("body").css("transition", "3s"); // Adding transition
$("body").css("background", "#fff"); //Background color to fade into
});
Plus here's a demo.
With pure JS you can use onload on the body and set up a function, then call it that way.
If you had an element eg: .elem
<div class="elem"></div>
Styles:
.elem {
width: 100px;
height: 100px;
background: red;
}
You could have a css class eh .nobackground that set the background to transparent with a transition.
.nobackground {
background: transparent !important;
transition: all 1s;
}
You could then apply this class to the element on page load with jquery.
$(document).ready(function(){
$(".elem").addClass("nobackground");
});
Heres a bin. Hope this helps.
Related
Generally you would define a onHover animation of a square class like this:
.square:hover {
animation-duration: 0.5s;
animation-name: square_hover;
}
#keyframes square_hover {
to {background-color: yellow;}
}
Is there a way to define it like this:
.square:hover {
animation-duration: 0.5s;
animation: {
to { background-color: yellow; }
};
}
#keyframes square_hover
?
According to MDN the correct way of declaring an animation is using this syntax:
#keyframes <keyframes-name> {
<keyframe-block-list>
}
And then call it back using animation properties:
animation-duration: time;
animation-name: animation;
Where you will is a string that will identify the animation name. And is the sequence you will follow to create the animation.
So in short, CSS has a strict syntax you have to follow. But it seems like you're trying to find a simpler way to declare/create animation on hover.
You can simply get rid of the animation and directly add the properties you want to change on hover. For instance, if you want to change the background colour of the square class you will simply start with the initial state/base styles:
.square {
background-color: black;
}
And then apply the styles you want to change:
.square:hover {
background-color: yellow;
}
And if you want smooth out the transition simply add the transition property to the base styles. And the syntax looks something like
transition: property-to-transition time ease;
A working example:
.square {
background-color: black;
transition: background-color .5s ease;
}
References:
MDN Docs #keyframes: #keyframes
MDN Docs transitions: transitions
MDN Docs animations: animations
I have this hover effect http://codepen.io/anon/pen/dMbEdq but problem is that after animation finishes, the hover disappear. I need that hover to stay. Any suggestion?
<div class="hover15">
<figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure>
</div>
Use following Code :
transition-duration: 100s;
Use the following code where ever you want animation to hold or stay for sometime. And if you want it to loop or play # click events kindly refer to KeyFrames.
Use like this :
#keyframes hover {
0% {
// normal styles
}
100% {
// hover styles
}
}
.class {
animation-name: hover;
animation-duration: 1ms;
animation-fill-mode: backwards;
animation-play-state: paused;
}
.class:active,
.class:focus,
.class:hover {
//hover style you define
}
Reference click here to see the effect
I have a div with a background color and css transitions
#foo {
background-color:rgba(255,0,0,0.9);
-webkit-transition: all 3000ms ease;
-moz-transition: all 3000ms ease;
-o-transition: all 3000ms ease;
transition: all 3000ms ease;
}
I also have a button. When the button is clicked, I would like to
immediately switch the div to transparent background and a final height
create a fade-in effect on background-color property only
To accomplish this, I've created some classes for the div
#foo.transparent {
background-color:transparent;
}
#foo.final {
background-color:rgba(255,0,0,0.9);
height:400px;
}
and apply them to the div with jQuery on click
$('#start').click(function() {
$('#foo').addClass('transparent').addClass('final');
});
Unfortunately, height switches immediately to the final value (this is correct), but the background color doesn't perform the required transition from transparent to final value. What am I missing?
(fiddle)
I think an easier solution might be to use jQuery's fadeIn() effect, like this:
Html:
<button id="start">start animation</button>
<div id="foo">some content</div>
CSS:
#foo {
background-color:rgba(255,0,0,0.9);
}
#foo.final {
height:400px
}
JQuery:
$('#start').click(function() {
console.log('click');
$('#foo').addClass('final').hide().fadeIn();
});
And your updated fiddle: https://jsfiddle.net/aqw4cbss/3/
height is not animatiable. use min-height && max-height instead.
plus the backgrounds in your initial state and final state are the same, so how can it be transitioned from 2 equals state.
jsfiddle
I think you should look into JQuery .animate and .css functions.
$('#foo').css("opacity", "0");
$('#foo').animate({backgroundColor: "green"}, 500);
note: you should specify a default background-color and opacity in the css to transition from.
EDIT: You'll need the JQuery Color plugin in order to make this work (it's very small.)
https://github.com/jquery/jquery-color
Is there a way to fade in an image when a user scrolls the image into view using purely if not mostly CSS?
I have a bunch of images displayed and I'd like the images to appear as they scroll down as a nice effect.
If you want the image to fade in only when the user can see it (after scrolling the page), you can't do it with CSS only. To make the fade in/fade out effect on hover use opacity and transition. Example
img{
opacity: 0.6;
transition: all 1s;
}
img:hover{
opacity: 1.0;
}
If you want to use JQuery, it's possible. See this exmaple.
img
{
opacity:0.4;
}
img:hover
{
opacity:1.0;
}
The CSS3 property for transparency is opacity.The opacity property can take a value from 0.0 - 1.0\
A lower value makes the element more transparent.
img:hover {
-webkit-filter: grayscale(100%);
}
Check this link, it would be of great help for you:-
http://designshack.net/?p=36895
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.