What i want to do is make my first line of text kind of zoom+fade in when the page is loaded, and my second line of text 2s after the page is loaded. I got the animations working and the timing using animation-delay, but i just can't figure out how to make the second line of text invisible until start of animation..
Here's a jsfiddle:
http://jsfiddle.net/L2wcxg2f/2/
This is my markup:
<center>
<h1><div id="line1">First</div><div id="line2">Second</div></h1>
</center>
And this is my css:
#line1 {animation: onload 2s;}
#line2 {animation: onload 2s; animation-delay: 2s;}
#keyframes onload {from{opacity: 0.0; font-size: 170px;}to{opacity: 1.0; font-size: 120px;}
Thanks in advance!
Give #line2 opacity:0 at the start and also animation-direction: forwards. Demo
Related
I want my CSS div to be completely invisible when page opens but after 2s appear on screen.
I tried setting opacity: 0; and then transition: opacity 100 2s; but it didn't work. I don't want CTA for example for it to happen after they hover or something but instead I want it to happen even if the user doesn't move the mouse. Please help!
You can use CSS animation to make it. Like this-
HTML-
<div class="div"></div>
And CSS-
<style>
.div{
width:100px;
height:100px;
background:red;
animation-name:opacity;
animation-duration:4s;
}
#keyframes opacity{
0%{opacity:0;}
100%{opacity:1;}
}
</style>
U can simply use CSS animations instead of transition.
consider HTML code having single div element
<div id="main"></div>
now to apply CSS animation we do something like this,
#main{
...add your desired code for styling the div...
animation-name:onload;
animation-duration: 1s;
animation-delay: 2s; //this is the key line, what this means is the animation would start after 2s of delay.
}
// Now creating animation
#keyframes onload{
0%{
opacity:0;
}
100%{
opacity: 1;
}
}
I came across text that fades in and fades out one after the other.
In developer mode, I was able to see the opacity vary for the texts from 0 to 1 to 0 in a sequence. How is this achieved?
<div class="text" style="opacity: 0;">The</div>
<div class="text" style="opacity: 0;">Nomads</div>
Here's a very simplistic approach using CSS3 Animations and the keyframes property (Please note I've edited this answer to include improvements from Frits' comment)
Although you might need to tweak it a little as
a text which fade in fade out one after the other
Is a pretty lose specification.
/* Define the key frames for animating the fade in / fade out */
#keyframes fade {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* attach the animations to the elements via their id attribute using a delay of 0s and 50% of the runtime respectively */
#one {
animation: fade 3s infinite 0s;
}
#two {
animation: fade 3s infinite 1.5s;
}
<p id="one">
This line of text will fade out as the next lines fade in
</p>
<p id="two">
This line of text will fade in as the previous lines fade out
</p>
you can use the following:
obviously I'm going to use JQuery:
jQuery('<div_name>').css('opacity', '<opacity_value>');
Background:
Trying to create an esthetically pleasing linking hover for the future
Current JSFiddle:
Available here for FF Browser.
body {
color:#ffffff;
font-family:"Helvetica";
font-size:12pt;
background-color:#000000;
font-weight:bold;
}
a:link {
color:white;
text-decoration:none;
}
a:hover {
animation: myhover 1s;
transition-timing-function: ease-in-out;
font-weight: bold;
}
#keyframes myhover {
from {
background-color: black;
color: white;
}
to {
background-color: white;
color: black;
}
}
Problem:
The transition works in what concerns the effect, but for some reason, even if you remain with the cursor on top of the link, it reverts to the FROM state without even a fade back from TO to FROM.
Need:
What code change is needed to stay at TO effect, until you take the cursor out of the hovered LINK and it reverts the effect to FROM?
Code type restrictions:
I do not wish to use JavaScript or JQuery in the solution, only CSS and HTML.
Many Thanks
Alban
There are two parts to your question:
1) How do you retain the current animation state?
Add animation-fill-mode to your CSS rule:
a:hover {
-webkit-animation: myhover 1s;
animation: myhover 1s;
transition-timing-function: ease-in-out;
font-weight: bold;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
2) How do you revert to the "From" transition
Fairly straight forward - you set the "default" animation properties of the link.
a:link {
-webkit-animation: nohover 1s;
animation: nohover 1s;
color:white;
text-decoration:none;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
The only issue you might run into is the page load. You'll notice the animations kick off before any interaction occurs (for -webkit-based-browsers). Without JavaScript, you'll need to consider this and how your animations will look.
A fiddle for demonstration: http://jsfiddle.net/6hxhxg5t/
You need to set the animation-fill-mode to forwards for the animation to retain the state as at its last keyframe.
animation: myhover 1s forwards;
or
animation-name: myhover;
animation-duration: 1s;
animation-fill-mode: forwards;
Option 1 Demo | Option 2 Demo
Note:
The demo uses -webkit- prefix as I am testing on Chrome, but the same would work with either the -moz- prefix or without any prefixes.
Achieving a reverse effect on hover out would not be possible without adding extra code as animation do not work like transition. The reverse effect would be better achieved with JavaScript/jQuery as the reverse animation cannot be kicked-off by default on the base class without it appearing once on page load also. Here is a way to achieve both the forward and reverse animation effects using jQuery. jQuery is not a must and the same can be done with vanilla JS also but I just used jQuery for doing a quick sample.
Option 3: (Using transtions instead of animations)
If your objective is only to linearly change the background-color and the color properties on mouse hover, then actually transition is a much better option to make use of instead of animation. Transitions can automatically answer both of your concerns. It can make the end state retained till the mouse is hovered out and the hover out will also cause the reverse effect to happen.
a:link {
color:white;
text-decoration:none;
transition: background-color 1s, color 1s;
/*transition: all 1s;*/ /* use this line if you wish to transition all properties */
transition-timing-function: ease-in-out;
}
a:hover {
font-weight: bold;
background-color: white;
color: black;
}
Option 3 Demo
This is my code:
http://jsfiddle.net/NVk2N/2/
I'm trying to fade the large background image in. I tried this:
#cover {
background: url(http://bootstrapguru.com/preview/cascade/images/carousel/imageOne.jpg) no-repeat center center fixed;
background-size: cover;
height:100%;
width: 100%;
position:fixed;
opacity:0;
transition: opacity 2s;
}
however the image never appears. What am I doing wrong?
James
You actually need an animation of the opacity, in which you set animation-fill-mode: forwards so the last frame continues to apply after the final iteration of the animation.
Updated fiddle: http://jsfiddle.net/NVk2N/7/
#cover {
...
-webkit-animation: 2s show;
-moz-animation: 2s show;
-ms-animation: 2s show;
animation: 2s show;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#-moz-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#-ms-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
(of course you need to use vendor prefixes where necessary)
Note: If you need to fade-in only the background image (and not the whole element) you could load the background inside an absolute positioned pseudoelement (e.g. #cover:before) with a negative z-index and just apply the animation to the psuedoelement itself:
Here's an example on codepen: http://codepen.io/anon/pen/EJayr/
Relevant CSS
#cover {
position: relative;
width : ...;
height : ...;
}
#cover:before {
content : "";
position: absolute;
z-index : -1;
top : 0;
left : 0;
width : 100%;
height : 100%;
background: url(...) top left no-repeat;
-webkit-animation: 5s show;
-moz-animation: 5s show;
-ms-animation: 5s show;
animation: 5s show;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
Animations on pseudoelements work fine on every modern browser (except in Chrome < 26 — as reported on issue #54699 — but not really a problem, since the current version at this moment is 34.0.1847.116)
you need to use some js code to trigger the animation property. just add a new class for #cover with opacity:1 and on body load assign this class to cover.
example
<body onload="document.getElementById('cover').classList.add('showed');">
To trigger a transition you actually need a trigger.
You are setting a opacity of "0" and this is what you get: 0 opacity.
The transition would work if the declaration of opacity would change from 0 to 1.
That is what transitions do.
The solution of Fabrizio Calderan with the Animation should do the job.
Working with the other answers that have been given will give you a fade on all the elements within that element so this will no achieve your desired result.
The best way to do this is to:
1) Create a div with a z-index of 1 which holds your background image and what you want to fade
2) Create another div with a z-index of 10 which holds your content which you dont want to fade and position it over the background div with position absolute.
3) Animate the background image with jquery animate
I hope this helps and that will give you your desired outcome!
I believe you may use keyframes and animations to get the job done.
It's not possible with purely css to fade only the background image. Reference: How to fade in background image by CSS3 Animation
The answer there explains that you may use <img> inside a <div> that you apply the fade animation on as there is no other way without anything but css.
I am able to rotate image with below CSS.
HTML code:
<div class="box-menu">
<img src="someurl" class="rotate-img">
</div>
CSS code:
.box-menu:hover >.binja-blade{
-webkit-animation:2s linear 0s normal none infinite spin;
-moz-animation:2s linear 0s normal none infinite spin;
-ms-animation:2s linear 0s normal none infinite spin;
-o-animation:2s linear 0s normal none infinite spin;
animation:2s linear 0s normal none infinite spin;
}
But if I use that image as list type in li then how I can rotate that image when we hover that particular li ?.
<ul class="box-menu" style="list-style-image:url('someURL');">
<li>Mumbai</li>
<li>Hyderabad</li>
<li>Pune</li>
</ul>
You cannot rotate background-image nor bullets, but pseudo-element , yes .
Idea is :
li {
list-style-type:none;
padding-left:20px;
}
li:before {
content:url(yourImage.png);
margin-left:-20px;
display:inline-block;
}
li:hover:before {
transform:rotate(360000deg);
transition:300s;/* tune this */
}
DEMO
I don't know if that is even possible. You can set the image, but don't see how you would add css to that image.
You might change the image via CSS on hover and use an animated instead of the static one.
Here is a link to where you can easelly generate rotating anemated gifs: http://www.ajaxload.info/
Hope this helps
I think you should read this so you can get your answer..i was searching and i found this..hope it will help ful..
How to rotate li:before independently of the li?