I am working on a web app. When a user visits the landing page, I want to fade-in an image. That image is the background for some text. When the image has successfully loaded, I then want to move the text in from the top. Currently, I have the following:
<html>
<head>
<title></title>
<style type="text/css">
.banner {
background-image: url('/public/img/bg.png');
background-size: cover
}
#keyframes fadeIn { from { opacity:0; } to { opacity:1; }}
.fade-in {
opacity:0;
animation:fadeIn ease-in 1;
animation-fill-mode:forwards;
animation-duration:0.2s;
}
#keyframes translateY { from { y:0px; } to { y:100px; } }
.translate-y {
animation:translateY ease-in 1;
animation-duration:0.1s;
animation-fill-mode:forwards;
}
</style>
</head>
<body>
<div class="banner fade-in">
<h1 class="translate-y">Welcome</h1>
</div>
</body>
</html>
There are several problems with this approach:
The animation starts whether the background-image is loaded or not.
The "Welcome" text starts animating before the background-image is loaded.
I'm not sure how to fix this. The first item is especially frustrating. I can't use jQuery, so I'm stuff with CSS. The second item, I could use an offset. However, once again, if the image isn't cached, nothing runs properly.
Place your image in the background with an <img ...> tag, (not with CSS background-image: ... attribute).
You can set the initial opacity to 0, and when the image onloaded, set the opacity to 1. With CSS you can make a transition between the two states:
<style>
.easeload{
opacity: 0;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
}
</style>
<img class="easeload" onload="this.style.opacity=1" src="https://dummyimage.com/320x240">
I have seen this problem before, there is a solution I have used myself from this css-tricks article, but just in case the link does go dead here is the solution: You need to add a class/id to your body to ensure that everything transitions/animations and anything you need CSS runs after the body loads. The below is an example of what you can achieve, keep in mind you can add anything else you need under the #preload id.
CSS
#preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
HTML
<body id="preload">
JS
// trigger right as the document loads
document.getElementById("preload").className = "";
Give it a try and let us know if this worked for you.
You can use animation-delay and add it to the elements.It should solve your problems :
animation-delay: 2s;
Related
I got a problem, I made a check mark CSS animation on my website, but they start on page load, and it shouldn't, it should only trigger on hovering / unhovering.
And the text need to collapse like (...) when the price goes above the description
All the code is available here: https://github.com/Douwdy/Projet-3
And you can get a preview here: https://douwdy.github.io/Projet-3/menu-1.html
Someone can help me to fix that ?
No Js Suggestion please
For CSS animations on page load your, I had a look at this and I would use transition & transform instead of animation
So if you remove the animations (check-box__in & check-box__out) in your css and replace with transitions below:
.menu-selector-box:hover .menu-selector-box__validator {
transition: transform 1s ease-out;
transform: translateX(-60px);
}
.menu-selector-box__validator {
transition: transform 1s ease-out;
}
.menu-selector-box-text__price {
transition: transform 1s ease-out;
}
.menu-selector-box:hover .menu-selector-box-text__price {
transition: transform 1s ease-out;
transform: translateX(-60px);
}
For the text issue I would suggest setting a width on menu-selector-box-text (I used 275px) and then on hover reduce the width (I used 225px), you can use the same transitions as above when reducing the width (transition: width 1s ease-out;)
Then the styles below need to be applied to the <h5> and the <p> tags.
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
On most browser-os-constillations the standard background of the site is white, so if I create a website I at first set the background-color to something dark. But if I try and set the transition property on "*", the background also fades in, which, in my opinion, looks bad. How can I remove that?
*{
transition: 2s;
}
body{
background-color: #000
}
<html>
<body>
<p>Hi!</p>
</body>
</html>
if your point is to select all and avoid the body from transition
you can use :not(body) :
:not(body){
transition: 2s;
}
body{
background-color: #000
}
I can't seem to be able to replicate the fade transition of the background you're describing.
However, if you need to exclude a specific element and/or property from animating, you can do it like this:
To exclude an element:
*:not(body) {
transition: all 2s;
}
To exclude a property:
* {
transition: all 2s, background-color 0;
}
Or to prevent the transitioning of background-color on the body:
* {
transition: all 2s;
}
body {
transition: all 2s, background-color 0;
}
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 am trying to add a simple ease-in and ease-out effect when you hover over a logo. I know there are posts about this. I've tried many different combinations of CSS, but can't seem to get it to work.
I've successfully changed the logo color by changing the content upon hover with this CSS code:
#dealertrackr-image.et_pb_image:hover {
content: url('image url');
}
When it is hovered over, the logo changes from the black and white state to colored state. I now want this to have a 1s ease-in and ease-out on hover and release of hover. Nothing that I tried worked.
http://www.nationalgalactic.com/divisions/
If all you were hoping for was grayscale, you may also be interested in just loading in the full color image and using a CSS filter to desaturate / resaturate on hover.
This combined with CSS transitions will create a nice little fade:
img {
-webkit-filter: grayscale(100%);
filter: gray; filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
transition: all .25s ease;
}
img:hover {
-webkit-filter: grayscale(0%);
filter: none;
}
*edit
This is a pure CSS solution, but is not fully supported in Android Jellybean, and Internet Explorer. If full browser support is important to you, please see isherwood's answer on this same post. For full support, your solutions are limited to stacked images or javascript.
The only way to do it with images is to stack elements and transition the opacity of the top layer. Browsers don't do image-to-image transitions.
Something like this, where the anchor has a background image:
a {
display: inline-block;
background: url(http://lorempixel.com/400/150/nature) left top no-repeat;
}
a img {
transition: opacity 1s;
}
a:hover img {
opacity: 0;
}
<a href="#">
<img src="http://lorempixel.com/400/150/nature/2" alt="">
</a>
Here's a demo with your code and images.
i'm trying to set up a navigation with cross fading images besides the nav. But placing the between the is not working.
So my intention is if home, about, work or contact is clicked the( one page ) will load the content and the navigation shows the right image of the current page.
HTML: <div id="cf7" class="shadow">
<img class='opaque' src="/images/Cirques.jpg" />
<img src="/images/Clown%20Fish.jpg;" />
<img src="/images/Stones.jpg;" />
<img src="/images/Summit.jpg;" />
</div>
<p id="cf7_controls">
<span class="selected">Home</span>
<span>About</span>
<span>Work</span>
<span>Contact</span>
</p>
CSS
p#cf7_controls {
text-align:center;
}
#cf7_controls span {
padding-right:2em;
cursor:pointer;
}
#cf7 {
position:relative;
height:281px;
width:450px;
margin:0 auto 10px;
}
#cf7 img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
#cf7 img.opaque {
opacity:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=1);
}
JAVASCRIPT
$(document).ready(function() {
$("#cf7_controls").on('click', 'span', function() {
$("#cf7 img").removeClass("opaque");
var newImage = $(this).index();
$("#cf7 img").eq(newImage).addClass("opaque");
$("#cf7_controls span").removeClass("selected");
$(this).addClass("selected");
});
});
That's a very unusual way to build a navigation. You don't even use anchor tags; those have the highest compatibility with older browsers for states like :hover.
For your example you need a syntax like this, for displaying the right images:
<span>About</span>
span {
background-image: none;
}
span#your_span_id:hover, span.selected {
background-image: url('path/to/your/img');
}
However, if you want to load content on one page, you will need at least javascript/ jquery to dynamically add/remove the '.selected' class. One CSS workaround is to nest your content divs in the navigation (and display: hide them, on hover show them), but in that case you need to specify the cursor for every element inside your content divs, and as soon as your visitors mouse out of the content div, it will disappear. Click events= javascript