How to animate an image between states - javascript

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>

Related

Keyframe animation :hover doesn't obey the "ease-out" part of the animation on mouse-out

I have a 3 chevron animation sequence set up for a back button I designed. The animation triggers on hover exactly the way I want it to but it doesn't respect the ease-out part of the animation property when I hover off of the button. I know that typically with CSS animations you fix this by putting the animation on the actual element and not the :hover state but the problem with that is that the keyframe animation triggers on page load and gets a little wonky on :hover. Is there a mouse-out or hover-out-like state that I could use so that when the user moves away from the button the animation eases out or even reverses? I tried adding animation-direction: reverse; property to the base elements but that doesn't do anything, probably because it doesn't know what animation I'm referring to because it's not present in the base elements for the reasons above. Do I possibly need some CSS or javascript to prevent the animation from triggering until the :hover state actually occurs and then I could place the animation in the base elements instead of the :hover state?
https://jsfiddle.net/astombaugh/L7k1r63f/54/
<body style="background-color: #214365">
<div class="backBtn">
<div class="chevronContainer">
<div class="backBtnChevronTop"></div>
<div class="backBtnChevronMid"></div>
<div class="backBtnChevronFar"></div>
</div>
Back
</div>
</body>
#import url('https://fonts.googleapis.com/css2?family=Oswald:wght#700&display=swap');
.backBtn {
font-family: Oswald, Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
position: absolute;
left: 4rem;
font-weight: 700;
width: auto;
height: auto;
color: white;
background-color: transparent;
padding: 0.2rem 0em 0.1rem 0em;
margin: 0rem 0rem 0rem 0rem;
text-align: center;
text-decoration: none;
font-size: 1.6em;
word-spacing: normal;
cursor: pointer;
}
.chevronContainer {
display: inline-block;
position: relative;
transform: translateY(-1.3rem) translateX(-1rem);
}
.backBtnChevronTop {
content: url(https://i.imgur.com/YHZi17i.png);
filter: invert(1);
position: absolute;
opacity: 1;
height: 1.33rem;
width: 1.33rem;
}
.backBtnChevronMid {
content: url(https://i.imgur.com/YHZi17i.png);
filter: invert(1);
position: absolute;
opacity: 0;
height: 1.33rem;
width: 1.33rem;
animation-direction: reverse;
}
.backBtnChevronFar {
content: url(https://i.imgur.com/YHZi17i.png);
filter: invert(1);
position: absolute;
opacity: 0;
height: 1.33rem;
width: 1.33rem;
animation-direction: reverse;
}
.backBtn:hover .backBtnChevronMid {
animation: animateChevronMid 0.6s ease-in-out;
animation-fill-mode: forwards;
}
.backBtn:hover .backBtnChevronFar {
animation: animateChevronFar 0.6s ease-in-out;
animation-fill-mode: forwards;
}
#keyframes animateChevronTop {
0% {
transform: translateX(0rem);
opacity: 0;
}
70%,
100% {
transform: translateX(0);
opacity: 1;
}
}
#keyframes animateChevronMid {
0% {
transform: translateX(0);
opacity: 0;
}
70%,
100% {
transform: translateX(-0.7rem);
opacity: 1;
}
}
#keyframes animateChevronFar {
0% {
transform: translateX(0);
opacity: 0;
}
70%,
100% {
transform: translateX(-1.4rem);
opacity: 1;
}
}
You can probably resolve this by adding the transition on element when there is no hover at the moment and tweak a little the keyframes. Like this:
.backBtn .backBtnChevronMid {
animation: animateChevronMid2 0.6s ease-in-out;
animation-fill-mode: forwards;
}
.backBtn .backBtnChevronFar {
animation: animateChevronFar2 0.6s ease-in-out;
animation-fill-mode: forwards;
}
#keyframes animateChevronMid2 {
0% {
transform: translateX(-0.7rem);
opacity: 1;
}
70%,
100% {
transform: translateX(0);
opacity: 0;
}
}
#keyframes animateChevronFar2 {
0% {
transform: translateX(-1.4rem);
opacity: 1;
}
70%,
100% {
transform: translateX(0);
opacity: 0;
}
}
this additional keyframes are exact opposite of the keyframes that you have done. And they do apply when you move your cursor from the element (so on hover off so to speak).
Jacck is right and beat me to it.
You can use that, and add a fadeIn transition to the back button itself. It's hacky but put this on the back button:
animation: fadeIn 0.6s ease-in-out;
And tweak the animation accordingly. It'll run once. If you don't want a fade just move the "stop" close to the end and this controls the container that holds the other animations so your whole effect won't show until it has loaded:
#keyframes fadeIn {
0% {opacity:0;}
95% {opacity: 0}
100% {opacity:1;}
}

How to apply a smooth fade in delay effect

I was wondering if anyone can provide a solution to this issue I am having, sorry I'm only a beginner at CSS.
Basically, I have a landing page where a youtube video plays in the background and I have some buttons that appear after 8 seconds. These buttons I want them to appear smoothly by fading in. I can't work out how to do this and the current css snippet I have is
.cover .btn-lg {
animation: cssAnimation 0s 8s forwards;
visibility: hidden;
padding: 15px 50px;
font-weight: bold;
}
#keyframes cssAnimation {
to { visibility: visible; }
}
Where and what can I change to get the effect I want, so rather than it just appear - I want it to fade in smoothly.
Transition
Opacity
These two together will allow for the fade effect you desire. It will be hidden by default, add the class .show to your element to start the transition.
.cover .btn-lg {
transition: opacity 8s;
opacity: 0;
padding: 15px 50px;
font-weight: bold;
}
.cover .btn-lg .show {
transition: opacity 8s;
opacity: 1;
}
.cover .btn-lg {
animation: cssAnimation 13s linear;
padding: 15px 50px;
font-weight: bold;
}
#keyframes cssAnimation {
0%{
opacity: 0;
}
38%{
opacity: 0;
}
100%{
opacity: 1;
}
}
<div class="cover">
<button class="btn-lg">Button</button>
</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;

how would i get the headline to fade in and move up very slightly on page load with css

How would i get the headline to fade in and move up slightly after the user lands on the home page using css. a good example of what i would like to achieve is on this website http://www.mikeinghamdesign.com. Understand it can be done using translateY but I have never used this before.
HTML
<div class="homepage">
<div class="headline">
<h1><span>WELCOME</span></h1>
</div>
<div class="subheadline">
<h1><span>To the home of</span></h1></div><div class="subheadline"><h1><span>Multimedia Journalist</span></h1></div>
<div class="subheadline"><h1><span>Dan Morris</span></h1></div>
Let's talk
<div class="down-link"><a class="w-downlink" href="#about"><i class="fa fa-chevron-down"></i></a></div>
</div>
CSS
.homepage {
height: 650px;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(../images/25H.jpg);
background-attachment: fixed;
float: left;
}
.headline {
height: auto;
width: 75%;
margin-left: 78px;
margin-top: 120px;
margin-right: auto;
font: 200 18px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
font-size: 12px;
font-weight: 200;
color: #676767;
text-align: left;
}
Easiest way is to just use a CSS animation:
http://jsfiddle.net/xdbpwoLa/
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.headline {
-webkit-animation: fadeIn .25s ease-in .5s both;
animation: fadeIn .25s ease-in .5s both;
}
#keyframes fade {
from {opacity: 0.2;}
to {opacity: 1;}
}
.headline{
animation-name: fade;
animation-duration: 2s;
}
How it works:
When the headline is loaded, the animation immediately takes effect and causes it to fade from 20% to 100% opacity. We define an animation named fade, then apply it to .headline.
Here is a JSfiddle link where you can test this.

CSS3: Lines of text sliding into page at different times

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>

Categories