CSS3: Lines of text sliding into page at different times - javascript

I have the code shown below that slides text into the page from right to left using css3 animation. I am using a different animation-delay for each line, but I have the problem that before the animation starts the lines are already visible on the left, and I don't want that.
Are there any meansa) to keep the text lines invisible before animation starts or
b) a simple way to load the lines at different times (maybe using javascript setTimeout?) or other tricks?
(note: I am using Firefox 35.0.1)
Help would be much appreciated!
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
animation-name: slidein;
animation-duration: 2s;
animation-timing-function: ease-in-out;
color: red;
font-size: 3.5em;
font-family: Arial;
font-weight:bold;
}
#keyframes slidein {
0% { margin-left: 100%; }
100% { margin-left: 0%; }
}
</style>
</head>
<body>
<h1 style="animation-delay: 0s;">ONE</h1>
<h1 style="animation-delay: 1s;">TWO</h1>
<h1 style="animation-delay: 3s;">THREE</h1>
</body>
</html>

You may simply set an higher value to margin-left, for example "101%", and texts disappear.
Anyway I suggest you tu replace margin-left with CSS translation, according to this link, for better performance. In this last case, due to particular behaviour of CSS transformation (explained here) you also don't need overflow:hidden on Body tag in order to avoid horizontal scrollbars.
#keyframes slidein {
0% { transform: translate(101%); }
100% { transform: translate(0%); }
}
Or, if you don't want to set a "strange" more than 100% value, you could combine my solution, with #Herrington Darkholme's one.

Just add opacity: 0; to the initial element and opacity: 1; to the animation.
However, you need to retain the opacity after the animation ends. So the animation-fill-mode: forwards; comes to help.
Update: using transform: translate(100%); thanks to #Luca Detomi
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
<!DOCTYPE html>
<html>
<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
<head>
<style>
h1 {
animation-name: slidein;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
color: red;
font-size: 3.5em;
font-family: Arial;
font-weight:bold;
opacity: 0;
}
#keyframes slidein {
0% { transform: translate(101%); opacity:1; }
100% { transform: translate(0%); opacity:1;}
}
</style>
</head>
<body>
<h1 style="animation-delay: 0s;">ONE</h1>
<h1 style="animation-delay: 1s;">TWO</h1>
<h1 style="animation-delay: 3s;">THREE</h1>
</body>
</html>

Add margin-left to more than 100%
h1 {
animation-name: slidein;
animation-duration: 5s;
animation-timing-function: ease-in-out;
color: red;
font-size: 3.5em;
font-family: Arial;
font-weight:bold;
margin-left: 105%;
}
#keyframes slidein {
0% { margin-left: 105%; }
100% { margin-left: 0%; }
}

Here is another solution to the same problem:
We start with witdh:0px and overflow:hidden; (invisible) and end width:300px.
<!DOCTYPE html>
<html>
<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
<head>
<style>
h1 {
animation-name: slidein;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
color: red;
font-size: 3.5em;
font-family: Arial;
font-weight:bold;
width:0px;
overflow:hidden;
}
#keyframes slidein {
0% { margin-left: 100%; width:300px; }
100% { margin-left: 0%; width:300px;}
}
</style>
</head>
<body>
<h1 style="animation-delay: 0s;">ONE</h1>
<h1 style="animation-delay: 1s;">TWO</h1>
<h1 style="animation-delay: 2s;">THREE</h1>
</body>
</html>

Related

How to create Timer Progress bar as shown below in GIF?

I want to create animated progress as below, but the thing is it is not working properly on safari browser
The css property which I used is:
.prgoressBar {
width: 100%;
margin: 0 auto;
height: 22px;
background-color:#BBBBBB;
overflow: hidden;
}
.prgoressBar div {
height: 100%;
text-align: right;
padding: 0;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 100%;
background-color: #185A8D;
box-sizing: border-box;
color:#fff;
-webkit-transition: width 1s linear;
-moz-transition: width 1s linear;
-o-transition: width 1s linear;
transition: width 1s linear;
}
<div id="QM_progressBar" class="prgoressBar">
</div>
Try using the 'transform: scaleX()' instead of changing the width. Transform uses to run better with transition, maybe that's why Safari is freaking out.
I don't have Safari installed right now, so please check if this codepen works: https://codepen.io/thiagoberrutti/pen/GRmLzZK.
In the codepen I used transition but in this snippet I tried with animations instead, see if one of them can work on Safari:
.progress-container{
width:500px;
height:22px;
border:5px solid #ccc;
}
.progress{
width:100%;
transform-origin:left;
height:100%;
background-color:#185A8D;
animation: timer var(--time) linear forwards;
}
#keyframes timer{
0%{
transform:scaleX(1)
}
100%{
transform: scaleX(0);
}
}
.progress-container{
width:500px;
height:22px;
border:5px solid #ccc;
}
.progress{
width:100%;
transform-origin:left;
height:100%;
background-color:#185A8D;
animation: timer var(--time) linear;
}
#keyframes timer{
0%{
transform:scaleX(1)
}
100%{
transform: scaleX(0);
}
}
<div class="progress-container">
<div class="progress" style="--time:5s"></div>
</div>

How to animate an image between states

I have some text that I would like to animate between a few states on hover.
Ideally, would like to mimic the below gif (I have the various states of the text).
Can anyone point me in the direction of how I would do this? I'm thinking using setInterval on html/css properties could work.
Thanks in advance!
letter-spacing is an CSS-animatable property, so you can set up a simple CSS keyframe to get this effect. No JS needed. For example:
span {
text-transform: uppercase;
font-family: sans-serif;
animation-name: space-out;
animation-direction: alternate;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.g1 { animation-delay: 0.5s; }
.g2 { animation-delay: 0s; }
.g3 { animation-delay: 1.3s; }
.g4 { animation-delay: 0.8s; }
#keyframes space-out {
0% { letter-spacing: 0; }
20% { letter-spacing: 1.2em; }
50% { letter-spacing: 1.2em; }
60% { letter-spacing: 0.3em; }
90% { letter-spacing: 0.8em; }
100% { letter-spacing: 0.8em; }
}
<h1>
<span class="g1">Haus</span><span class="g2">der</span>
<span class="g3">kun</span><span class="g4">st</span>
</h1>
It's seems a letter-spacing animation.
Here is a simplified example that you can elaborate considering more animation states:
.box {
display:inline-block;
font-size:25px;
}
.box span {
padding:0 2px;
animation:change 1s infinite alternate;
}
.box span:last-child {
animation-delay:0.5s;
}
#keyframes change {
from{letter-spacing:0px}
to{letter-spacing:15px}
}
<div class="box">
<span>Some</span>
<span>Text</span>
</div>

Hover animation reverts to beginning after animation is finished

Example here:
https://codepen.io/rfehre/pen/mKryEV
CSS
.intro-side3.out {
animation-name: out;
animation-duration: 2s;
}
.intro-side3.over {
animation-name: in;
animation-duration: 2s;
}
#-webkit-keyframes out {
0%{background-position:100% 49%}
100%{background-position:0% 52%}
}
#-webkit-keyframes in {
0%{background-position:0% 52%}
100%{background-position:100% 49%}
}
Javascript
$('.intro-side3').hover(
function() {
$(this).removeClass('out').addClass('over');
},
function() {
$(this).removeClass('over').addClass('out');
}
);
I'm trying to do a gradient animation on a hover, and then to reverse that animation when you mouse off. It's not perfect, but for the most part it's working alright. Except that, if you hover for more than the currently assigned 2 seconds, the gradient reverts back to its initial state. I'm not sure why.
I'm probably missing something obvious, right?
use animation-fill-mode: forwards; property
https://codepen.io/anon/pen/BVLyvm
You can achieve the same without javascript
#import url(https://fonts.googleapis.com/css?family=Montserrat:300);
#import url(https://fonts.googleapis.com/css?family=Montserrat:800);
#import url(https://fonts.googleapis.com/css?family=Montserrat:600);
.bold-600 {
font-family: montserrat;
font-weight: 600;
}
.main {
padding-left: 0;
}
.main2 {
padding-left: 0;
padding-top: 10px;
}
.intro-side3 {
padding: 2rem;
height: 400px;
font-size: 24px;
color: white;
font-family: montserrat;
background: linear-gradient(270deg, #662d91, #00aeef, #ec008c);
background-size: 600% 600%;
animation-name: out;
animation-duration: 2s;
animation-fill-mode: forwards;
}
.intro-side3:hover {
animation-name: in;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#-webkit-keyframes out {
0% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#-webkit-keyframes in {
0% {
background-position: 0% 52%
}
100% {
background-position: 100% 49%
}
}
<div class="main2 col-lg-3 col-md-4">
<h1 style="font-family:montserrat; font-size:24px; padding:20px;">Hover /w Reverse</h2>
<div class="intro-side3 gradientbg">
<div class="inner">
<p>We are here to <span class="bold-600"> do things</span> and <span class="bold-600">also maybe some stuff.</span>
</div>
</div>
</div>
try adding the following property to the CSS
animation-iteration-count: 1;

Why is my image not rotating after mouse click? (javascript + css)

I am trying to get the image to rotate after a button click, but I cannot get the image to rotate. After putting the animation lines of css into an image:active id block in css, I was able to get the image to rotate on an active mouse click, but that is not what my assignment calls for.
HTML
<a id="button" onclick="rotate()">Go</a>
<img class="click" id="image" src="http://placehold.it/500x500">
<script type="text/javascript" src="script.js"></script>
</body>
Javascript
function rotate(){
image.className = 'click';
}
CSS
#button {
font-family: "Verdana";
font-weight: inherit;
font-size: 3vmin;
line-height: 14vmin;
text-align: center;
display: block;
border: none;
background: white;
width: 15vmin;
height: 15vmin;
margin: 2vmin auto;
border-radius: 10vmin;
cursor: pointer;
color: black;
}
.click:active {
display: block;
background: transparent;
border: 0px solid transparent;
height: 50vh;
width: 50vh;
margin: 5vh auto 0;
transition: height 100ms, border-width 100ms, border-color 100ms;
animation: rotate;
animation-delay: 100ms;
animation-timing-function: reverse; animation-iteration-count: normal;
animation-duration: 1s;
animation-play-state: running;
animation-direction: reverse;
}
Have a look at this. It seems you haven't set the degrees.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function rotate(){
myImg=document.getElementById('image');
myImg.className = 'rotate';
}
</script>
<style>
.rotate {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
</head>
<body>
<a id="button" onclick="rotate()">Go</a>
<img class="click" id="image" src="http://placehold.it/500x500">
</body>
</html>
active is uninitialized when you use it, assuming that's the entirety of your Javascript. You'll want to use document.getElementById('active') instead.
Your function sets the class of the element to 'click', which doesn't make much sense since the class of the img tag is initially set to 'click'. Nothing changes when your function is called.
The CSS selector should just be .click instead of .click:active, and the img tag shouldn't start with a class.

How to make an element with background image appear using css animation/javascript

I have a div tag with a background image. I want to use css animation or with combination of javascript/jquery to animate how the background image appears when the page loads. Currently, I have two vertical borders that I created with equal length and they both start off at the same position. When the page loads, one border will automatically move to the right side while the other one move to the left. During this transition, I want the div tag with the background image to slowly appear. Here's what I have so far:
.background-img {
width: 10px;
margin: 0 auto;
}
.borders {
position: absolute;
left: 50%;
width: 8px;
background-color: blue;
height: 50px;
border-radius: 4px;
}
.left-vertical-border {
animation-name:move-left;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
.right-vertical-border {
top: 8px;
animation-name:move-right;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
#keyframes move-left {
from{transform: translateX(0px);}
to{transform: translateX(-100px);}
}
#keyframes move-right {
from{transform: translateX(0px);}
to{transform: translateX(100px);}
}
<!DOCTYPE html>
<html>
<head>
<title>Creating Vertical borders using animation/javascript</title>
</head>
<body>
<div class="left-vertical-border borders"></div>
<div class="background-img">fake bg image</div>
<div class="right-vertical-border borders"></div>
</body>
</html>
Thanks in advance!
Add CSS:
.background-img {
width: 10px;
height: 10px;
margin: 0 auto;
animation-name:img-ani;
animation-duration: 2s;
animation-timing-function: ease-in;
}
#keyframes img-ani {
from{opacity:0;}
to{opacity: 1;}
}

Categories