We Keep Coding

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>

repeating animate code with jquery in better way

I'm trying to make simple animation that
line length changing repeatedly.
and, here is my code
$(document).ready(function(){
var redline = $('.redline');
setInterval(redmove,100)
})
function redmove(){
var redline = $('.redline');
redline.animate({'width':'500px'},2000)
.animate({'width':'20px'},2000)
}
.redline{
background: red;
height: 10px;
width: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="redline"></div>
my code runs well with no problem, but, I think there must be a better code(maybe more efficient..etc)
So, here is the question
1.If this code is not good, why?
(in perspective of something like efficiency...etc)
2.I want to know better code in this situation.
thanks!
HAPPY NEW YEAR!

Look into this
#keyframes changeWidth {
0% {
width: 20px;
}
50% {
width: 500px;
}
100% {
width: 20px;
}
}
.redline {
height: 50px;
background-color:red;
animation: 4s ease-out 0s infinite changeWidth;
}
<div class="redline"></div>

You can handle it by CSS like below:
.redline {
height: 10px;
width: 20px;
background: red;
-webkit-animation-name: test_animation; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
animation-name: test_animation;
animation-duration: 4s;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes test_animation {
0% {
width: 20px;
}
50% {
width: 500px;
}
100% {
width: 20px;
}
}
/* Standard syntax */
#keyframes test_animation {
0% {
width: 20px;
}
50% {
width: 500px;
}
100% {
width: 20px;
}
}
<div class="redline"></div>

You can use a simple CSS #keyframe animation , like so:
.redline {
background: red;
height: 10px;
width: 20px;
animation-name: animateLine;
animation-duration: 2s;
animation-fill-mode: ease-in;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
#keyframes animateLine {
0% {
width: 20px;
}
50% {
width: 500px;
}
100% {
width: 20px;
}
}
<div class="redline"></div>
NOTE::- you can use autoprefixer to prefix you CSS and also you can reduce your css code by using the animate shorthand.

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.

Bouncing effect using css3 keyframes animation

I am trying bouncing effect using css3 key-frame animation.
here is fiddle link: click
Background of box is changing but my requirement is to give bouncing effect to background image not background color.
What exactly I need: A bouncing(jumping) teddy on trampoline with two states:
(1. with arms up, 2. with arms down) while jumping.
Any ideas how to achieve it? Thank you!

I got solution for this:
.margin{
margin-top:200px;
}
}
/* keyframes definition for WebKit browsers */
#-webkit-keyframes travel {
from { right: 10px; }
to { right: 10px; }
}
#-webkit-keyframes bounce {
from, to {
bottom: 40px;
-webkit-animation-timing-function: ease-out;
}
50% {
bottom: 140px;
-webkit-animation-timing-function: ease-in;
}
}
#-webkit-keyframes bounce1 {
from, to {
bottom: 40px;
-webkit-animation-timing-function: ease-out;
}
50% {
bottom: 140px;
z-index:9;
-webkit-animation-timing-function: ease-in;
}
}
/* keyframes definition for other browsers */
#keyframes travel {
from { right: 10px; }
to { right: 10px; }
}
#keyframes bounce {
from, to {
bottom: 45px;
animation-timing-function: ease-out;
}
50% {
bottom: 140px;
animation-timing-function: ease-in;
}
}
#keyframes bounce1 {
from, to {
bottom: 45px;
animation-timing-function: ease-out;
}
50% {
bottom: 140px;
z-index:9;
animation-timing-function: ease-in;
}
}
/* styles for the stage and animated elements */
#traveler {
position: absolute;
width: 75px;
height: 100px;
-webkit-animation-name: travel;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-duration:2.8s;
animation-name: travel;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 2.8s;
}
#bouncer {
position: absolute;
width: 75px;
z-index:10;
height: 100px;
border-radius: 10px;
/*background: url(../img/jump.png) no-repeat;*/
background:green;
-webkit-animation-name: bounce;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2.2s;
animation-name: bounce;
animation-iteration-count: infinite;
animation-duration: 2.2s;
}
#bouncer2 {
position: absolute;
z-index:11;
width: 75px;
height: 100px;
border-radius: 10px;
/*background: url(../img/pyonpyon.png) no-repeat;*/
background:red;
-webkit-animation-name: bounce1;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2.2s;
animation-name: bounce1;
animation-iteration-count: infinite;
animation-duration: 2.2s;
}
<div class="margin">
<div id="traveler">
<div id="bouncer"> </div>
<div id="bouncer2"> </div>
</div>
</div>
Fiddle example: https://jsfiddle.net/Sharan_thethy/eyjkpy8u/
Thank you

How do I put 'fadein' and 'animate' texts in the middle of the page?

I was wondering if it is possible to assign a group of stacking texts in the middle of the page? placing them in the center wasn't too difficult, but the problem was that they are positioned left, right, top, and bottom, which I think means they need to be given: position:absolute. Furthermore, the .headline texts are given fade-in(opacity 0 to 100) and animation commands. In terms of scaling, the texts are responsive, and get smaller as the window gets smaller. In addition they are assigned their own z-index.
In the image below, I have laid out the overall structure I would like to achieve, but I'm experiencing a lot of difficulty doing so because of the text behaviors I want to accomplish.
For functionality reference, here is a jsfiddle.
Please help me and thank you in advance! Please note that I would prefer to use CSS only since it's a simple function that only occurs once upon page load. However, if this is a issue that only javascript can solve, please let me know :)
.animated {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-ms-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.fade {
-webkit-animation-name: fade;
-moz-animation-name: fade;
-o-animation-name: fade;
animation-name: fade;
}
#-webkit-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes flowright {
0% {
opacity: 0;
left: -100px;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes flowright {
0% {
opacity: 0;
left: -100px;
}
100% {
opacity: 1;
left: 0;
}
}
#-webkit-keyframes flowleft {
0% {
opacity: 0;
right: -100px;
}
100% {
opacity: 1;
right: 0;
}
}
#keyframes flowleft {
0% {
opacity: 0;
right: -100px;
}
100% {
opacity: 1;
right: 0;
}
}
#-webkit-keyframes flowup {
0% {
opacity: 0;
margin-top: 100px;
}
100% {
opacity: 1;
margin-top: 0;
}
}
#keyframes flowup {
0% {
opacity: 0;
margin-top: 100px;
}
100% {
opacity: 1;
margin-top: 0;
}
}
#-webkit-keyframes flowdown {
0% {
opacity: 0;
margin-top: -100px;
}
100% {
opacity: 1;
margin-top: 0;
}
}
#keyframes flowdown {
0% {
opacity: 0;
margin-top: -100px;
}
100% {
opacity: 1;
margin-top: 0;
}
}
.flow {
display: inline-block;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
-webkit-animation-direction: alternate;
-webkit-animation-fill-mode: both;
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.right {
-webkit-animation-name: flowright;
animation-name: flowright;
}
.left {
-webkit-animation-name: flowleft;
animation-name: flowleft;
}
.up {
-webkit-animation-name: flowup;
animation-name: flowup;
}
.down {
-webkit-animation-name: flowdown;
animation-name: flowdown;
}
.sequence01 {
-webkit-animation-delay: 0.1s;
}
.sequence02 {
-webkit-animation-delay: 0.2s;
}
.sequence03 {
-webkit-animation-delay: 0.3s;
}
.sequence04 {
-webkit-animation-delay: 0.4s;
}
/* Headline Typography */
.headline {
font-family: helvetica;
font-weight: bold;
font-size: 4em;
}
/* Rows */
.row01, .row02, .row03 {
clear: both;
}
.row01 {
left:20%;
top: 0;
position: relative;
}
.row02 {
right:10%;
top: 50%;
position: relative;
}
.row03 {
left:10%;
top: 100%;
position: relative;
}
/* General Structure */
body {
width: 100%;
height: 100%;
}
.pagewrap {
height: 100%;
width: 80%;
max-width: 48em;
margin: 0 auto;
background-color: #fff6d6;
}
<body>
<div class="pagewrap">
<div class="headline">
<div class="row01 flow left sequence01">ROW 01</div>
<br/>
<div class="row02 flow right sequence02">ROW 02</div>
<br/>
<div class="row03 flow up sequence03">ROW 03</div>
</div>
</div>
</body>

The solution given by adeneo in the comments may work perfectly fine, but since your layout is strictly vertical, why not just use a block layout instead of inline-block or floats?
fiddle here.
You mention a "padding" percentage between the rows as well. Note that margin and padding css attributes as percentages will key off of the width not the height. I placed divs to solve that, but there are other solutions.
Edit
If the headline needs to be vertically centered to the page, here's a nifty way to do it using the "ghost element technique":
/* Headline Typography */
.wrapper {
position: relative;
height: 100%;
width: 100%;
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.wrapper:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.headline {
display: inline-block;
width: 100%;
vertical-align: middle;
font-family: helvetica;
font-weight: bold;
font-size: 4em;
}
fiddle
I learned of it here.