Disable CSS Animation run on page load (No JS, Only HTML & CSS) - html

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;

Related

Fade In Image On Load Via CSS

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;

css move elements smoothly

Trying to make userface more userfriendly i want to implement following:
I have a table with some alert above it. Take a look at this example
When I close alert table 'jumps' to the top. I want it to slide smoothly. I want to use pure css. I've read about transition and animation but i think that's not what i need, or maybe i am wrong.
Any ideas? Thanks in advance!
K, so you can do it with pure css. Bootstrap removes the in class from the alert at the beginning of the fade out. We can use that to apply css to the alert before it's removed from the page.
.fade {
max-height: 400px;
-webkit-transition: .3s;
-ms-transition: .3s;
transition: .3s;
}
.fade:not(.in) {
max-height: 0;
}
See it in action: http://jsfiddle.net/McHUc/92/

i want show div result when i clicked the asp button with css3

I want show div result when i clicked the asp button with css3 with slow motion please any one can help me.
<div id="showdivslowly" runat="server" style="width:500px; height:200px; background-color:Blue ;display:none" >Welcome</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
This will almost certainly be best done client side through an Ajax call to the server to fetch the result and append it to a hidden div which you animate either using CSS transitions or by using the jQuery animation methods like fadeIn. As the CSS display property is not animatable using CSS transitions, you would either need to use the opacity property (which will not be fully supported cross-browser, albeit probably sufficiently supported for most purposes and only the animation would be affected rather than the core functionality) or by using the jQuery methods.
If you handle the click event on the server side then the browser will complete a full page-postback, you can append the div using your server side code, and then use either a CSS3 transition or JavaScript to complete the animation client side.
For a code sample-
.result {
-moz-transition: opacity 500ms ease-in-out 0s;
-o-transition: opacity 500ms ease-in-out 0s;
-webkit-transition: opacity 500ms ease-in-out 0s;
transition: opacity 500ms ease-in-out 0s; }
.result.hidden {
display: none;
opacity: 0;
}
.result.shown {
display: block;
opacity: 1;
}

CSS custom button slide transition?

Alright Google isn't helping me out much here.
The aim of the game is to have a button, which is a custom png, and upon mouse rollover it 'slides upwards', remaining in the same spot but transitioning to the rollover by means of sliding.
Preferably I'd like to get this sorted using CSS3, the page already has a bit of an OTT fest of JQuery.
Currently I've only managed to get it to slide from the left side. Downwards is fine too.
Code is about as simple as it comes, the HTML looks like this (Just a basic DIV):
<div id="Abutton"><a draggable="false" title="A button n' stuff"></a></div>
The CSS:
#Abutton a {
background: url(mediafolder/Abutton.png) no-repeat 0% 0px;
display: block;
height: 32px;
width: 86px;
cursor: pointer;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}
#Abutton a:hover {
background-position: -86px 0%;
}
(Plus a further # for the positioning and size etc..)
If it makes for any complications the button is also tied to a JQuery file that upon clicking, smooth scrolls to a different point in the page (Props to the awesome chap that helped me out with that last night!).
Thanks in advance!
I think what you're asking is a slot machine display type feel?
Just use an image sprite, which you pretty much already are trying to do, and put a css animation on it, and it will look what you want (which i think is what you want?) Best of luck
.animate {
-webkit-transition: all 0.250s -in-out;
-moz-transition: all 0.250s ease-in-out;
-o-transition: all 0.250s ease-in-out;
transition: all 0.250s ease-in-out;
}

Disable CSS transitions for a single style?

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;
}