On my page load I'm trying to get text to move up and fade in on page load.
(Example here: https://fabriceleven.com/design/creating-fancy-css3-fade-in-animations-on-page-load/)
I've got the fade in working fine, however when I try the code below for the moveUp animation, the text doesn't appear at all. Where am i going wrong?
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
#keyframes moveUp {
0% {
transform: translate(0px,20px);
}
100% {
transform: translate(0px,0px);
}
}
.move-up {
animation:moveUp ease-in 1;
animation-fill-mode:forwards;
animation-duration:1s;
}
And my HTML:
<h1 class="paddingTop20 fade-in move-up">Leading Topic</h1>
This can be best achieved with javascript. Something along the line of this,
<!DOCTYPE html>
<head>
<title>Happy rising text</title>
<style type="text/css">
#yourHtmlTag{
text-align: center;
/*This is needed.*/
position: absolute;
top: 30%;
transition: all 1s ease-out;
}
</style>
</head>
<body onload="floatUp()">
<header id="yourHtmlTag">Float Up!</header>
<!-- The script needs to be below where it is called -->
<script type="text/javascript">
function floatUp(){
document.getElementById('yourHtmlTag').style.top = "15%";
}
</script>
</body>
This has been tested, if you have any other questions don't hesitate to ask!
Related
I have a simple loading screen where I would like to have one dot appear at a time at the end of the text.
Unfortunately I can only get them to blink, when I would like for one to appear at a time and then start over.
I am currently using a fade in animation that looks like the following:
#keyframes fadeIn {
0% { opacity: 0 }
100% { opacity: 1 }
}
Here is a sample of what I have:
const App = () => {
return (
<h1>
Loading<span>.</span><span>.</span><span>.</span>
</h1>
)
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
#keyframes fadeIn {
0% { opacity: 0 }
100% { opacity: 1 }
}
span:nth-child(1) {
opacity: 0;
animation: fadeIn 500ms infinite;
}
span:nth-child(2) {
opacity: 0;
animation: fadeIn 500ms infinite;
animation-delay: 500ms;
}
span:nth-child(3) {
opacity: 0;
animation: fadeIn 500ms infinite;
animation-delay: 1000ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>
As you can see, currently, it does show one at a time, but then just has all three of them blinking. How could I make them show one at a time, and then start over?
Thanks!
An easier idea with less of code:
.loading {
font-weight: bold;
display:inline-block;
font-family: monospace;
font-size: 30px;
clip-path: inset(0 3ch 0 0);
animation: l 1s steps(4) infinite;
}
#keyframes l {
to {
clip-path: inset(0 -1ch 0 0)
}
}
<div class="loading">Loading...</div>
I am trying to use the fade out animation in CSS and it works at first but then at the last minute the element pops back. JSFiddle: https://jsfiddle.net/eqb02w5u/
HTML Code:
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
<div class='fade-in'>Fading In</div>
<div class='fade-out'>Fading Out</div>
CSS Code:
.fade-in {
background-color: red;
animation:fadeIn 3s linear;
}
#keyframes fadeIn {
0% {
opacity:0
}
100% {
opacity:1;
}
}
.fade-out {
background-color: green;
animation:fadeOut 3s linear;
}
#keyframes fadeOut {
100% {
opacity:0
}
0% {
opacity:1;
}
}
This is a really old question but you can add:
animation-fill-mode: forwards;
in each class where you want the animation to stay faded out.
$(function() {
$('.text1').delay(1000).fadeIn(1500);
$('.text1').delay(600).fadeOut(1500);
$('.text2').delay(5000).fadeIn(1500);
$('.text2').delay(600).fadeOut(1500);
$('.text3').delay(10000).fadeIn(1500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text1">Lorem Ipsem</div>
<div class="text2">Lorem Ipsem</div>
<div class="text3">Lorem Ipsem</div>
Above is my simple jQuery animation; simple delay -> fadeIn -> delay -> fadeOut. However I find when trying to create a loop, for my animations to run continuously my code becomes way to large and bulky. I am wondering if it's at all possible to rewrite what I have above with CSS3 only, and then using the infinite option CSS allows.
I've gotten close with CSS below code however, I need to completely hide or fadeOut each line of text before new text shows.
#-webkit-keyframes slider {
0% { opacity: 0.4; }
100% { opacity: 1; }
}
#-moz-keyframes slider {
0% { opacity: 0.4; }
100% { opacity: 1; }
}
#-ms-keyframes slider {
0% { opacity: 0.4; }
100% { opacity: 1; }
}
.slider {
-webkit-animation: slider 1s alternate infinite;
-moz-animation: slider 1s alternate infinite;
-ms-animation: slider 1s alternate infinite;
}
<div class="slider">Lorem Ipsum</div>
As stated in other answers you can not achieve what you are asking using pure CSS solutions.
You can a solution like to an extensible approach (in case you want have many more child elements).
$("#fadeinout div").on("animationend", function() {
_this = jQuery(this);
// remove animation class
_this.removeClass("animate");
// If there is no next element then go to first one otherwise choose next element
var next = (_this.next().length < 1) ? _this.prevAll(':first-child') : _this.next();
// Add class to the new element
next.addClass("animate");
});
#fadeinout div {
width: 100px;
height: 100px;
background: red;
opacity: 0;
margin: 5px;
}
.animate {
animation-name: fadeinout;
animation-duration: 4s;
animation-delay: 0s;
}
#keyframes fadeinout {
50% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fadeinout">
<div class='animate'></div>
<div></div>
<div></div>
<div></div>
</div>
This is the same example with many child elements animated: https://jsfiddle.net/j4zdgopr/1/
You can't really time the animation of multiple elements in css only. Well you could probably fake it with something like:
div {
width: 50px;
height: 50px;
background: #f00;
opacity: 0;
}
#d1 {
animation: d1 10s infinite;
}
#d2 {
animation: d2 10s infinite;
}
#d3 {
animation: d3 10s infinite;
}
#d4 {
animation: d4 10s infinite;
}
#keyframes d1 {
0% { opacity: 0; }
5% { opacity: 1; }
20% { opacity: 1; }
25% { opacity: 0; }
}
#keyframes d2 {
25% { opacity: 0; }
30% { opacity: 1; }
45% { opacity: 1; }
50% { opacity: 0; }
}
#keyframes d3 {
50% { opacity: 0; }
55% { opacity: 1; }
70% { opacity: 1; }
75% { opacity: 0; }
}
#keyframes d4 {
75% { opacity: 0; }
80% { opacity: 1; }
95% { opacity: 1; }
100% { opacity: 0; }
}
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
...but I would recommend against it. First of all I don't think the timing will be reliable - ie. it will get out of sync. Second your code will most likely be even more bulky than what you have.
So I would recommend a combination of simple CSS transitions and JS like this:
var curslide = 0;
var slides = $("#slider div");
var nextslide = function() {
slides.removeClass('shown');
if (curslide >= slides.length) curslide = 0;
slides.eq(curslide).addClass('shown');
curslide++;
setTimeout(nextslide, 3000);
}
nextslide();
#slider div {
width: 50px;
height: 50px;
background: #f00;
opacity: 0;
transition: opacity .5s linear;
}
#slider div.shown {
opacity: 1;
transition: opacity .5s .5s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</div>
With this solution you can add as many frames as needed without modifying the css or js.
I'd try playing with animation-delay, but I think it only applies to the first time the animation is run. After that, unless you write one animation for each .text element, they'll all fade in/out with the same frequency.
Would:
setInterval(function(){
$('.text1').delay(5000).fadeIn(1500);
$('.text2').delay(5000).fadeIn(1500);
$('.text3').delay(5000).fadeIn(1500);
$('.text1').delay(1000).fadeOut(1500);
$('.text2').delay(5000).fadeOut(1500);
}, 11500);
get you somewhere close?
Can somebody help me, please. I'm starting with css animations and transforms. What i want is an infinite rotation of a division (with svg inside). My css/html5 concoction works fine in Firefox but not in Google Chrome. I'm not sure where the problem lies. This is the link:
Infinite CSS Rotation
And a second step I want to control the animation with jQuery. This again doesn't work in Chrome but it does in FF. The link to this extended example:
Infinite CSS Rotation with jQuery control
Any clue will be much appreciated.
Try this,you forgot #keyframe and -webkit-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Rotate Infinitely</title>
<style type="text/css">
#container {
background-color:rgba(245, 168, 66, 0.4);
height:250px;
margin:50px auto;
width:250px;}
#rotate1 {
-webkit-animation: rot_inf 5s infinite linear;
animation: rot_inf 5s infinite linear;
}
#keyframes rot_inf {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
/* transform-origin: 50% 50%; */}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
/* transform-origin: 50% 50%; */}
}
#-webkit-keyframes rot_inf {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
/* transform-origin: 50% 50%; */}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
/* transform-origin: 50% 50%; */}
}
</style>
</head>
<body>
<div id="container">
<div id="rotate1"><img width="250" height="250" alt="cog" src="http://testline.memetic-tv.net/css_rotate_infinite/img/cogwheel2.svg"></div>
</div>
</body>
</html>
Here is a simple example based on:
http://css-tricks.com/snippets/css/keyframe-animation-syntax/
at the bottom of the page it provides a webkit animation demo which I edited in order to demonstrate the -webkit-animation-play-state
jsfiddle
In short it could be accomplished by detecting the current animation state, and based on that set -webkit-animation-play-state to running or paused
html:
<img src="http://files.simurai.com/misc/sprite.png" />
<div class="hi"></div>
click
js:
$('a').click(function(){
var $p = $('.hi');
var state = $p.css("-webkit-animation-play-state")
console.log(state);
if (state == "running"){
$p.css("-webkit-animation-play-state", "paused");
} else {
$p.css("-webkit-animation-play-state", "running");
}
return false;
})
css:
.hi {
width: 50px;
height: 72px;
background-image: url("http://files.simurai.com/misc/sprite.png");
-webkit-animation: play .8s steps(10) infinite;
-moz-animation: play .8s steps(10) infinite;
-ms-animation: play .8s steps(10) infinite;
-o-animation: play .8s steps(10) infinite;
animation: play .8s steps(10) infinite;
}
#-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-o-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
Rotate division infinite using css and html
css code is :
<style>
div{
height:200px;
width:200px;
-webkit-animation: spin 2s infinite linear;
}
#-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
</style>
div in HTML
<html>
<body>
<div><img src="xyz.png" height="200px" width="200px"/></div>
</body>
</html>
in div a image rotate infinite
we have this h1 here
<h1 class="in">hello</h1>
and css for this is
.in{
-webkit-animation:mymove1 3s 1;
}
.in:hover {
-webkit-animation:nextT 3s 1;
-webkit-animation-fill-mode:forwards;
}
#-webkit-keyframes "mymove1"
{
0% {opacity:0;
margin-left:0px;}
100% {opacity:1;
margin-left: 8px;}
}
#-webkit-keyframes "nextT"
{
0% {
-webkit-transform:scale(1);
}
100% {
-webkit-transform:scale(1.2);
}
}
so onload animation work properly and when i hover it grows up that's what i want but when i remove my mouse from the h1 the "mymove1" animation start again. i cloud not understand why this is happening help me out.you can also check the code working on
jsFiddle
Heres the code if you want it to change opacity on pageload & resize when you hover without the 'mymove1' animation restarting.
<style>
.in{
animation:mymove1 3s 1;
transform:scale(1);
/*If You want the hover to ease in and out*/
transition:transform 1s ease-in-out 0s;
}
.in:hover {
transform:scale(1.2);
}
#keyframes mymove1
{
0% {opacity:0;
margin-left:0px;}
100% {opacity:1;
margin-left: 8px;}
}
</style>