Reverse CSS @keyframes animation, WITHOUT JavaScript. At all. Possible?

What is annoying me is that when you define @keyframes, to do the opposite/reverse you have declare the thing twice!

Sure, transitions reverse themselves but then you have the problem with initial state.

See this example:

.class {
   animation-timing-function: ease-in-out;
   animation-direction: alternate;
   animation-fill-mode: both;
   animation-name: slideInLeft;
}

.class:hover, .class.hide {
  // F*****G reverse and retrigger the keyframe animation
}

@keyframes slideInLeft {
    from {
        transform: translate3d(-100%, 0%, 0%);

    }
    to {
        transform: translate3d(0%, 0%, 0%);
    }
}

Rather than also being forced to do:

@keyframes slideOutLeft {
    from {
        transform: translate3d(0%, 0%, 0%);
    }
    to {
        transform: translate3d(-100%, 0%, 0%);
    }
}

I would like to say that on:

.class:hover, .class.hide { 
       // REVERSE THE slideInLeft animation without using slideOutLeft: 

       animation-name: slideOutLeft;

       // Rather I would like to say

      animation-name:slideInLeft ; // the same as .class really

      // but 
      animation-direction:reverse; 
      animation-fill-mode:backwards; 

      // do not work because they don't retrigger the animation if it has the same name. Only if I change the name and declare a totally new keyframe can I do what I want. 
}

Meaning I’m not interested in repeating the declaration, which is just the opposite of slideInLeft.

For complex animations, this is extremely annoying to do.


Source: stackoverflow-javascript

How do I make an HTML-button both redirect the user to a new .html-page whilst also saving data from form input using .value?

I have created a form where a user gets to type in data that is saved in variables when the data is submitted. I am requesting a solution that will both save the user’s data whilst also redirecting the user to a new .html-page when the button is pressed.

<button type="button" onclick="getInfo()">Submit</button>

As you can see above, the button is activating a function, that will save the info like this:

function getInfo(){
var firstname = document.getElementById("firstname").value
var lastname = document.getElementById("lastname").value
var adress = document.getElementById("adress").value
var password1 = document.getElementById("password1").value
var password2 = document.getElementById("password2").value
}

How can I make this possible? Sincerely, Decentralized.


Source: stackoverflow-javascript

Add linear gradient to SVG circle

I am trying to add a gradient I got from online to my SVG circle. This is my gradient

background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);

I am trying to add this gradient type to my circle instead of the “fill=”yellow”. I tried inserting the gradient in the code but nothing. Tried searching/playing around with it but, ended up with nothing. Here is my code

Codepen
http://codepen.io/anon/pen/wdaMVR

html

<svg width="100%" height="100%" class="circlesvg">


                    <circle id="firstCircle" cx="0" cy="0" r="40" fill="yellow"></circle>

                </svg>

CSS

.circlesvg{
            position: absolute;
            left: 0;
            top: 0;
        }        
            #firstCircle{
            animation: fadeAndScale 33s ease-in infinite;
            -ms-animation: fadeAndScale 33s ease-in infinite;
            -webkit-animation: fadeAndScale 33s ease-in infinite;
            -moz-animation: fadeAndScale 33s ease-in infinite;
            -o-animation: fadeAndScale 33s ease-in infinite;
            transition-timing-function: linear;
            }
            @keyframes fadeAndScale{
            0%{
              z-index: 100;
              transform: scale(0);
              transform: translate(200px, 200px);
            }
            100%{
              z-index: 0;
              transform: scale(200);

}
          }


Source: stackoverflow-javascript

Canvas rectangle fill with colour

I was trying to create a rectangle which within html 5 canvas for which i can provide value from min to max. For this i am thinking to create a gradient variable like

  defaultGradient: {
        0.4: 'blue',
        0.6: 'cyan',
        0.7: 'lime',
        0.8: 'yellow',
        1.0: 'red'
    }

For instance user enters value 50 so the application should select mid of blue and Cyan and fill the rectangle. help appreciated. I have gone through with different links of SO but didn’t worked for me


Source: stackoverflow-javascript

Parallax Jerking on Scroll

I’m currently trying to recreate Built in Amsterdam’s parallax header style (within reason), It has the text scrolling up whilst the image is scrolling down on page scroll. I’ve managed to recreate this, but it doesn’t work as smooth as Built in Amsterdam’s and I’ve noticed that the background jerks around a lot within Chrome. Please could somebody point me in the right direction to figure this out. I’ve provided Built in Amsterdam’s URL, the development URL and JS below. Thank you for any and all help with this.

Built in Amsterdam – URL:

http://www.buildinamsterdam.com/case/high-45/

Development – URL:

http://adamwadsworth.co.uk/dev/wearevapour/vapour/glass-caves.html

JS Source

$(function() {
  $(window).scroll(function() {
    var scrollDown = $('.layout-1').position().top + $(window).scrollTop() / 3 +'px';
    $('.scrollbg').css({'background-position': '0px ' + scrollDown, 'transition': '0s ease', 'transition-property': 'background-position'});
  });
});


Source: stackoverflow-javascript

CSS rotation by 360 degrees

I want to rotate a rectangle by an angle of 360 degrees (or even > 360 degrees) using CSS. The center of the rotation is “right center”. If I use the following CSS code for a rotation by 180 degrees (and trigger the rotation with JavaScript) it works fine:

@keyframes rotation {
  from {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    opacity: 1;
    -webkit-animation-timing-function: linear;
  }

to {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
    transform: rotate3d(0, 0, 1, 180deg);
    opacity: 1;
    -webkit-animation-timing-function: linear;
  }
}

.rotation {
  animation-name: rotation;
}

However, if I replace the 180 degrees by an angle >= 360 degrees it won’t work anymore. For example in the case of 360 degrees nothing happens because the starting position is equal to the end position of the rotation.

How can I implement rotations by 360 degrees or more?


Source: stackoverflow-javascript