We Keep Coding

css Synchronise keyframe animations - javascript

I'm looking to synchronise the keyframe animation of three different elements.
They are basically three hearts and I want them to follow a heartbeat animation when they are clicked.
When two or more are clicked, I want them to "beat" in sync.
You can check a JSbin here
What I have so far is :
.rating {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 140px;
height: 50px;
padding: 5px 10px;
margin: auto;
border-radius: 30px;
background: #FFF;
display: block;
overflow: hidden;
unicode-bidi: bidi-override;
direction: rtl;
}
.rating:not(:checked)>input {
display: none;
}
/* - - - - - LIKE */
#like {
bottom: -65px;
}
#like:not(:checked)>label {
cursor: pointer;
float: right;
width: 30px;
height: 30px;
display: block;
margin-right: 7.5px;
color: rgba(233, 54, 40, .4);
line-height: 42px;
text-align: center;
transition: color 0.2s;
}
#like:not(:checked)>label:hover,
#like:not(:checked)>label:hover~label {
color: rgba(233, 54, 40, .6);
}
#like>input:checked+label:hover,
#like>input:checked+label:hover~label,
#like>input:checked~label:hover,
#like>input:checked~label:hover~label,
#like>label:hover~input:checked~label {
color: rgb(233, 54, 40);
}
#like>input:checked~label {
color: rgb(233, 54, 40);
animation: 1s heartbeat infinite;
}
#keyframes heartbeat {
from {
transform: scale(1);
transform-origin: center center;
animation-timing-function: ease-out;
}
10% {
transform: scale(1.2);
animation-timing-function: ease-in;
}
15% {
transform: scale(1);
animation-timing-function: ease-out;
}
25% {
transform: scale(1.15);
animation-timing-function: ease-in;
}
35% {
transform: scale(1);
animation-timing-function: ease-out;
}
}
<section id="like" class="rating">
<!-- THIRD HEART -->
<input type="radio" id="heart_3" name="like" value="3" />
<label for="heart_3" class="heart-slider">♥</label>
<!-- SECOND HEART -->
<input type="radio" id="heart_2" name="like" value="2" />
<label for="heart_2" class="heart-slider">♥</label>
<!-- FIRST HEART -->
<input type="radio" id="heart_1" name="like" value="1" />
<label for="heart_1" class="heart-slider">♥</label>
</section>
What is the good way to achieve sync ?
Thank you
EDIT
Following Rounin's answer, here's the updated CSS that gets the job done :
#like {
}
#like:not(:checked) > label {
cursor:pointer;
float: right;
width: 30px;
height: 30px;
display: inline-block;
color: (255, 255, 255);
transition: color 0.2s;
}
#like:not(:checked) > label:hover,
#like:not(:checked) > label:hover ~ label {
color: rgba(252, 108, 133, 1);
}
#like > input:checked + label:hover,
#like > input:checked + label:hover ~ label,
#like > input:checked ~ label:hover,
#like > input:checked ~ label:hover ~ label,
#like > label:hover ~ input:checked ~ label {
color: rgb(252, 108, 133);
}
#like > input:checked ~ label {
color: rgb(252, 108, 133);
}
#heart_1:checked ~ label {
animation: heartbeat1 1s infinite;
}
#heart_2:checked ~ label {
animation: heartbeat2 1s infinite;
}
#heart_3:checked ~ label {
animation: heartbeat3 1s infinite;
}
#keyframes heartbeat1 {
from {
transform: scale(1);
transform-origin: center center;
animation-timing-function: ease-out;
}
10% {
transform: scale(1.2);
animation-timing-function: ease-in;
}
15% {
transform: scale(1);
animation-timing-function: ease-out;
}
25% {
transform: scale(1.15);
animation-timing-function: ease-in;
}
35% {
transform: scale(1);
animation-timing-function: ease-out;
}
}
#keyframes heartbeat2 {
from {
transform: scale(1);
transform-origin: center center;
animation-timing-function: ease-out;
}
10% {
transform: scale(1.2);
animation-timing-function: ease-in;
}
15% {
transform: scale(1);
animation-timing-function: ease-out;
}
25% {
transform: scale(1.15);
animation-timing-function: ease-in;
}
35% {
transform: scale(1);
animation-timing-function: ease-out;
}
}
#keyframes heartbeat3 {
from {
transform: scale(1);
transform-origin: center center;
animation-timing-function: ease-out;
}
10% {
transform: scale(1.2);
animation-timing-function: ease-in;
}
15% {
transform: scale(1);
animation-timing-function: ease-out;
}
25% {
transform: scale(1.15);
animation-timing-function: ease-in;
}
35% {
transform: scale(1);
animation-timing-function: ease-out;
}
}

You can set up 3 identical animations and style your inputs and labels such that when a new radio button is selected, the old animation stops and the new one begins. That way the hearts will always be in sync:
Working Example:
div {
display: block;
position: relative;
width: 125px;
height: 60px;
box-shadow: 3px 3px 3px rgba(127, 127, 127, 0.4);
}
input {
display: none;
}
label {
position: absolute;
display: inline-block;
top: 0;
font-size: 40px;
line-height: 60px;
color: rgba(255, 127, 127, 0.75);
}
label:hover,
label:hover ~ label {
color: rgba(255, 0, 0, 0.75);
}
.like1 {
left: 10px;
}
.like2 {
left: 50px;
}
.like3 {
left: 90px;
}
#like1:checked ~ label {
animation: heartbeat1 0.8s infinite;
}
#like2:checked ~ label {
animation: heartbeat2 0.8s infinite;
}
#like3:checked ~ label {
animation: heartbeat3 0.8s infinite;
}
#keyframes heartbeat1 {
0% {
color: rgba(255, 0, 0, 0.5);
}
50% {
color: rgba(255, 0, 0, 1);
}
}
#keyframes heartbeat2 {
0% {
color: rgba(255, 0, 0, 0.5);
}
50% {
color: rgba(255, 0, 0, 1);
}
}
#keyframes heartbeat3 {
0% {
color: rgba(255, 0, 0, 0.5);
}
50% {
color: rgba(255, 0, 0, 1);
}
}
<div>
<input type="radio" id="like3" name="likes" value="3" />
<label class="like3" for="like3">♥</label>
<input type="radio" id="like2" name="likes" value="2" />
<label class="like2" for="like2">♥</label>
<input type="radio" id="like1" name="likes" value="1" />
<label class="like1" for="like1">♥</label>
</div>

Modified #Rounin's answer to give you the output you require.
div {
display: block;
position: relative;
width: 125px;
height: 60px;
box-shadow: 3px 3px 3px rgba(127, 127, 127, 0.4);
}
input {
display: none;
}
label {
position: absolute;
display: inline-block;
top: 0;
font-size: 40px;
line-height: 60px;
color: rgba(255, 127, 127, 0.75);
}
label:hover,
label:hover~label {
color: rgba(255, 0, 0, 0.75);
}
.like1 {
left: 10px;
}
.like2 {
left: 50px;
}
.like3 {
left: 90px;
}
#like1:checked~label {
animation: heartbeat1 0.8s infinite;
}
#like2:checked~label {
animation: heartbeat2 0.8s infinite;
}
#like3:checked~label {
animation: heartbeat3 0.8s infinite;
}
#keyframes heartbeat1 {
0% {
transform: scale( .75);
}
20% {
transform: scale( 1);
}
40% {
transform: scale( .75);
}
60% {
transform: scale( 1);
}
80% {
transform: scale( .75);
}
100% {
transform: scale( .75);
}
}
#keyframes heartbeat2 {
0% {
transform: scale( .75);
}
20% {
transform: scale( 1);
}
40% {
transform: scale( .75);
}
60% {
transform: scale( 1);
}
80% {
transform: scale( .75);
}
100% {
transform: scale( .75);
}
}
#keyframes heartbeat3 {
0% {
transform: scale( .75);
}
20% {
transform: scale( 1);
}
40% {
transform: scale( .75);
}
60% {
transform: scale( 1);
}
80% {
transform: scale( .75);
}
100% {
transform: scale( .75);
}
}
<div>
<input type="radio" id="like3" name="likes" value="3" />
<label class="like3" for="like3">♥</label>
<input type="radio" id="like2" name="likes" value="2" />
<label class="like2" for="like2">♥</label>
<input type="radio" id="like1" name="likes" value="1" />
<label class="like1" for="like1">♥</label>
</div>

Related

I'm using the 'success' event from Clipboard.JS to change the button text after some one have click it to provide a feedback that the text is successfully copied.
There are multiple span inside the button element, the feedback/new string (Copied!) will replace the original text (Take Me There) and be applied to the first span when the function is invoked.
If the feedback/new string apply to the first span, then the original text (Take Me There) will not be replaced instead the feedback will be appear on top since it applied to the first span.
How do I make the new string to the span that include the original text(the last span)? Please try to run the code for clearer illustration.
Below is my code:
var clipboard = new ClipboardJS('.copyElement')
clipboard.on('success', function(e) {
let span = e.trigger.querySelector('span')
let oldtext = span.textContent
span.textContent = 'Copied!'
setTimeout(() => span.textContent = oldtext, 2000)
});
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 330px;
background-color: #000;
}
.Big {
width: 257px;
padding: 33px 0 30px 0;
font-size: 21px;
}
.RedPhotonEffect {
color: rgba(239, 71, 111, 1);
overflow: hidden;
position: relative;
border: none;
background-color: rgba(239, 71, 111, 0.12);
cursor: pointer;
}
.RedPhotonEffect span:nth-child(1){
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to right, #000, #ef476f);
animation: animate1 3s linear infinite;
animation-delay: 1.5s;
}
#keyframes animate1 {
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
.RedPhotonEffect span:nth-child(2){
position:absolute;
top: 0;
right: 0;
width: 3px;
height: 100%;
background: linear-gradient(to bottom, #000, #ef476f);
animation: animate2 3s linear infinite;
}
#keyframes animate2 {
0%{
transform: translateY(-100%);
}
100%{
transform: translateY(100%);
}
}
.RedPhotonEffect span:nth-child(3){
position:absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to left, #000, #ef476f);
animation: animate3 3s linear infinite;
animation-delay: 1.5s;
}
#keyframes animate3 {
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
.RedPhotonEffect span:nth-child(4){
position:absolute;
bottom: 0;
left: 0;
width: 3px;
height: 100%;
background: linear-gradient(to top, #000, #ef476f);
animation: animate4 3s linear infinite;
}
#keyframes animate4 {
0%{
transform: translateY(100%);
}
100%{
transform: translateY(-100%);
}
}
<button
class="copyElement RedPhotonEffect Big"
data-clipboard-text="123"
>
<span></span>
<span></span>
<span></span>
<span></span>
<span>Take Me There</span>
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

Then try using a class instead
var clipboard = new ClipboardJS('.copyElement')
clipboard.on('success', function(e) {
let span = e.trigger.querySelector('.label')
let oldtext = span.textContent
span.textContent = 'Copied!'
setTimeout(() => span.textContent = oldtext, 2000)
});
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 330px;
background-color: #000;
}
.Big {
width: 257px;
padding: 33px 0 30px 0;
font-size: 21px;
}
.RedPhotonEffect {
color: rgba(239, 71, 111, 1);
overflow: hidden;
position: relative;
border: none;
background-color: rgba(239, 71, 111, 0.12);
cursor: pointer;
}
.RedPhotonEffect span:nth-child(1){
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to right, #000, #ef476f);
animation: animate1 3s linear infinite;
animation-delay: 1.5s;
}
#keyframes animate1 {
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
.RedPhotonEffect span:nth-child(2){
position:absolute;
top: 0;
right: 0;
width: 3px;
height: 100%;
background: linear-gradient(to bottom, #000, #ef476f);
animation: animate2 3s linear infinite;
}
#keyframes animate2 {
0%{
transform: translateY(-100%);
}
100%{
transform: translateY(100%);
}
}
.RedPhotonEffect span:nth-child(3){
position:absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to left, #000, #ef476f);
animation: animate3 3s linear infinite;
animation-delay: 1.5s;
}
#keyframes animate3 {
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
.RedPhotonEffect span:nth-child(4){
position:absolute;
bottom: 0;
left: 0;
width: 3px;
height: 100%;
background: linear-gradient(to top, #000, #ef476f);
animation: animate4 3s linear infinite;
}
#keyframes animate4 {
0%{
transform: translateY(100%);
}
100%{
transform: translateY(-100%);
}
}
<button
class="copyElement RedPhotonEffect Big"
data-clipboard-text="123"
>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="label">Take Me There</span>
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

I have a text which appears when I run contrastShow function like this:
const contrast = document.getElementById("contrast");
function contrastHide() {
//sfxPlay(sfx.caption_hide);
contrast.classList.add("contrastHide");
contrast.classList.remove("contrastShow");
}
function contrastShow(text) {
contrast.innerHTML = text;
contrast.classList.add("contrastShow");
contrast.classList.remove("contrastHide");
}
contrastShow("This is the text");
setTimeout(() => {
contrast.classList.add("zoomIn");
}, 3000);
.contrast-container {
overflow: hidden;
height: 10vh;
width: 100%;
z-index: 11;
/*outline: 0.1vw dashed orange;*/
}
.vertical-center-contrast {
position: absolute;
top: 73.5vh; /*top: 82vh;*/
padding-top: 10px;
margin: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.contrast {
position: relative;
font-family: "Vazir";
direction: rtl;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 2vw;
color: rgb(248, 247, 250);
opacity: 0;
margin: 0 auto;
}
.contrastShow {
animation: contrastAnimeShow 0.3s ease-in-out;
animation-fill-mode: forwards ;
}
.contrastHide {
animation: contrastAnimeHide 0.3s ease-in-out;
animation-fill-mode: forwards ;
}
#-webkit-keyframes contrastAnimeShow {
0% { opacity: 0; top: 4vh }
100% { opacity: 1; top: 1.2vh }
}
#-webkit-keyframes contrastAnimeHide {
0% { opacity: 1; top: 1.2vh }
100% { opacity: 0; top: 4vh }
}
.zoomIn {
-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
animation: heartbeat 1.5s ease-in-out infinite both;
}
#-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
to {
-webkit-transform: scale(2);
transform: scale(2);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
<div class ="vertical-center-contrast contrast-container">
<p id="contrast" class="contrast"></p>
</div>
Then I want to animate the text by adding a new class attached to a keyframe animation (using a setTimeout at the very end f the code).
But unexpectedly the text just hides and there is no animation ?!
What I missed and how to fix this?

The heartbeat animation is running, your element is just hidden via opacity. You should set the initial value of .contrast opacity to 1 and use the backwards fill-mode. This way it doesn't fallback to 0 if you overwrite the animation.
const contrast = document.getElementById("contrast");
function contrastHide() {
//sfxPlay(sfx.caption_hide);
contrast.classList.add("contrastHide");
contrast.classList.remove("contrastShow");
}
function contrastShow(text) {
contrast.innerHTML = text;
contrast.classList.add("contrastShow");
contrast.classList.remove("contrastHide");
}
contrastShow("This is the text");
setTimeout(() => {
contrast.classList.add("zoomIn");
}, 3000);
.contrast-container {
overflow: hidden;
height: 10vh;
width: 100%;
z-index: 11;
/*outline: 0.1vw dashed orange;*/
}
.vertical-center-contrast {
position: absolute;
top: 73.5vh; /*top: 82vh;*/
padding-top: 10px;
margin: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.contrast {
position: relative;
font-family: "Vazir";
direction: rtl;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 2vw;
color: rgb(248, 247, 250);
opacity: 1;
top: 1.2vh;
margin: 0 auto;
}
.contrastShow {
animation: contrastAnimeShow 0.3s ease-in-out;
animation-fill-mode: backwards ;
}
.contrastHide {
animation: contrastAnimeHide 0.3s ease-in-out;
animation-fill-mode: backwards ;
}
#-webkit-keyframes contrastAnimeShow {
0% { opacity: 0; top: 4vh }
100% { opacity: 1; top: 1.2vh }
}
#-webkit-keyframes contrastAnimeHide {
0% { opacity: 1; top: 1.2vh }
100% { opacity: 0; top: 4vh }
}
.zoomIn {
-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
animation: heartbeat 1.5s ease-in-out infinite both;
}
#-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
to {
-webkit-transform: scale(2);
transform: scale(2);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
<div class ="vertical-center-contrast contrast-container">
<p id="contrast" class="contrast"></p>
</div>

On my site http://the-stone-quest.000webhostapp.com/test/test1.html you can see that the left button works perfectly and I wanted to have more than one on those buttons so I thought that you could just copy the code and use the same script, but the copied version never works and I don't understand why. If you go to the page you would understand what I mean. How do I get the other button to work?
Here the left one doesn't work either but it does on my site.
var formContainer = $('#form-container');
bindFormClick();
//Opening the form
function bindFormClick() {
$(formContainer).on('click', function(e) {
e.preventDefault();
toggleForm();
//Ensure container doesn't togleForm when open
$(this).off();
});
}
//Closing the form
$('#form-close, .form-overlay').click(function(e) {
e.stopPropagation();
e.preventDefault();
toggleForm();
bindFormClick();
});
function toggleForm() {
$(formContainer).toggleClass('expand');
$(formContainer).children().toggleClass('expand');
$('body').toggleClass('show-form-overlay');
$('.form-submitted').removeClass('form-submitted');
}
//Form validation
$('form').submit(function() {
var form = $(this);
form.find('.form-error').removeClass('form-error');
var formError = false;
form.find('.input').each(function() {
if ($(this).val() == '') {
$(this).addClass('form-error');
$(this).select();
formError = true;
return false;
} else if ($(this).hasClass('email') && !isValidEmail($(this).val())) {
$(this).addClass('form-error');
$(this).select();
formError = true;
return false;
}
});
if (!formError) {
$('body').addClass('form-submitted');
$('#form-head').addClass('form-submitted');
setTimeout(function() {
$(form).trigger("reset");
}, 1000);
}
return false;
});
function isValidEmail(email) {
var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")#(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
return pattern.test(email);
};
social("twitter/joeharry__", "codepen/woodwork",
"disco");
body {
font-family: Roboto, sans-serif;
width: 100%;
font-size: 16px;
margin: 0;
padding: 0;
}
h1,
h2 {
font-weight: 700;
color: #FFF;
font-weight: 700;
font-size: 4em;
margin: 0;
padding: 0 20px;
}
.form-overlay {
width: 0%;
height: 100%;
top: 0;
left: 0;
position: fixed;
opacity: 0;
background: #000;
transition: background 1s, opacity 0.4s, width 0s 0.4s;
}
.show-form-overlay .form-overlay {
width: 100%;
opacity: 0.7;
z-index: 999;
transition: background 1s, opacity 0.4s, width 0s;
}
.show-form-overlay.form-submitted .form-overlay {
background: #119DA4;
transition: background 0.6s;
}
#form-container {
cursor: pointer;
color: #FFF;
z-index: 1000;
position: sticky;
margin: 0 auto;
left: 0;
right: 0;
bottom: 5vh;
background-color: #f72f4e;
overflow: hidden;
border-radius: 50%;
width: 60px;
max-width: 60px;
height: 60px;
text-align: center;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
transition: all 0.2s 0.45s, height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.25s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s, width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s;
}
#form-container.expand {
cursor: auto;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.17);
border-radius: 0;
width: 70%;
height: 350px;
max-width: 610px;
padding: 0;
transition: all 0.2s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, height 0.3s ease 0.25s;
}
#form-close {
cursor: pointer;
}
.icon::before {
cursor: pointer;
font-size: 30px;
line-height: 60px;
display: block;
transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.icon:hover::before {
-webkit-animation: wiggle 0.1s linear infinite;
animation: wiggle 0.1s linear infinite;
}
.fa-pencil::before {
display: block;
}
.fa-close::before {
display: none;
}
.expand.fa-pencil::before {
display: none;
}
.expand.fa-close::before {
display: block;
-webkit-animation: none;
animation: none;
}
#form-content {
font-family: Roboto, sans-serif;
-webkit-transform: translateY(150%);
transform: translateY(150%);
width: 100%;
opacity: 0;
text-align: left;
transition: opacity 0.2s 0.2s, -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s 0.2s;
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s 0.2s, -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#form-content.expand {
-webkit-transform: translateY(0px);
transform: translateY(0px);
opacity: 1;
transition: opacity 0s, -webkit-transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, opacity 0s;
transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, opacity 0s, -webkit-transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
#form-content form {
color: #FFF;
width: 100%;
height: 100%;
padding: 0 20px 20px 20px;
margin-bottom: 10px;
box-sizing: border-box;
text-align: left;
}
#form-head {
font-size: 100%;
padding: 0;
margin: 0 20px;
color: #FFF;
text-align: center;
transition: all 0.8s 0.6s;
}
#form-head h1,
#form-head p {
padding: 0;
margin: 5;
}
#form-head .pre {
display: block;
}
#form-head .post {
display: none;
}
.form-submitted#form-head {
-webkit-transform: translateY(250%);
transform: translateY(250%);
}
.form-submitted#form-head .pre {
display: none;
}
.form-submitted#form-head .post {
display: block;
}
.input {
background: rgba(0, 0, 0, 0.2);
display: block;
height: 50px;
width: 100%;
margin: 10px 0;
padding: 0 10px;
border-width: 0;
box-sizing: border-box;
border: none;
outline: none;
box-shadow: none;
-webkit-transform: translateX(0);
transform: translateX(0);
}
::-webkit-input-placeholder {
/* Safari, Chrome and Opera */
color: rgba(255, 255, 255, 0.8);
font-size: 90%;
}
/* Firefox 18- */
:-moz-placeholder {
color: rgba(255, 255, 255, 0.8);
font-size: 90%;
}
/* Firefox 19+ */
::-moz-placeholder {
color: rgba(255, 255, 255, 0.8);
font-size: 90%;
}
/* IE 10+ */
:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.8);
font-size: 90%;
}
/* Edge */
::-ms-input-placeholder {
color: rgba(255, 255, 255, 0.8);
font-size: 90%;
}
/* Default */
:placeholder-shown {
color: rgba(255, 255, 255, 0.8);
font-size: 90%;
}
input,
select,
textarea {
color: #FFF;
}
.input.message {
resize: none;
height: 150px;
padding: 10px;
}
.input.submit {
background-color: #FFF;
color: #f72f4e;
font-size: 120%;
height: 80px;
box-shadow: 0 5px rgba(0, 0, 0, 0.5);
transition: all 0.1s, -webkit-transform 0s 0.6s;
transition: all 0.1s, transform 0s 0.6s;
transition: all 0.1s, transform 0s 0.6s, -webkit-transform 0s 0.6s;
}
.input.submit:active {
margin-top: 15px;
box-shadow: 0 0 rgba(0, 0, 0, 0.5);
}
.input.form-error {
-webkit-animation: error 0.8s ease;
animation: error 0.8s ease;
background: rgba(0, 0, 0, 0.7);
}
select option {
background: #f72f4e;
color: #FFF;
border: none;
box-shadow: none;
outline: none;
}
select option:disabled {
font-style: italic;
color: rgba(255, 255, 255, 0.9);
font-size: 90%;
}
.input {
transition: -webkit-transform 0s 1s;
transition: transform 0s 1s;
transition: transform 0s 1s, -webkit-transform 0s 1s;
}
.form-submitted .input {
-webkit-transform: translateX(150%);
transform: translateX(150%);
opacity: 0;
transition: all 0.5s, -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;
transition: all 0.5s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;
transition: all 0.5s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s, -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}
.form-submitted .input:nth-child(1) {
transition-delay: 0.1s;
}
.form-submitted .input:nth-child(2) {
transition-delay: 0.2s;
}
.form-submitted .input:nth-child(3) {
transition-delay: 0.3s;
}
.form-submitted .input:nth-child(4) {
transition-delay: 0.4s;
}
.form-submitted .input:nth-child(5) {
transition-delay: 0.5s;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #FFF inset;
}
#media (max-width: 600px) {
#form-container.expand {
height: 100%;
width: 100%;
max-width: 100%;
overflow: initial;
overflow-x: hidden;
bottom: 0;
}
h1 {
font-size: 300%;
}
.icon:hover::before {
-webkit-animation: none;
animation: none;
}
.form-overlay {
display: none;
transition: none;
}
}
#-webkit-keyframes error {
0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
20%,
40%,
60%,
80% {
-webkit-transform: translateX(6px);
transform: translateX(6px);
}
}
#keyframes error {
0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
20%,
40%,
60%,
80% {
-webkit-transform: translateX(6px);
transform: translateX(6px);
}
}
#-webkit-keyframes wiggle {
0%,
100% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
50% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
}
#keyframes wiggle {
0%,
100% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
50% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
}
<html lang="en" class="gr__the-stone-quest_000webhostapp_com">
<head>
<meta charset="UTF-8">
<title>Expanding Contact Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body data-gr-c-s-loaded="true" class="">
<div class="form-overlay"></div>
<div class="icon fa fa-pencil" id="form-container">
<span class="icon fa fa-close" id="form-close"></span>
<div id="form-content" class="">
<div id="form-head">
<h1 class="pre">Chapter 1</h1>
<p class="pre">ENTER CHECKPOINT PASSWORD . . . </p>
</div>
<form>
<label for="pswd"></label>
<input class="input name" type="password" placeholder="Checkpoint Passcode" id="pswd">
<input class="input submit" type="button" value="Enter Chapter 1" onclick="checkPswd();">
<center>
<p id="span" class="pre form-error"></p>
</center>
</form>
</div>
</div>
<div class="icon fa fa-pencil" id="form-container">
<span class="icon fa fa-close" id="form-close"></span>
<div id="form-content" class="">
<div id="form-head">
<h1 class="pre">Chapter 1</h1>
<p class="pre">ENTER CHECKPOINT PASSWORD . . . </p>
</div>
<form>
<label for="pswd"></label>
<input class="input name" type="password" placeholder="Checkpoint Passcode" id="pswd2">
<input class="input submit" type="button" value="Enter Chapter 1" onclick="checkPswd();">
<center>
<p id="span" class="pre form-error"></p>
</center>
</form>
</div>
</div>
<script type="text/javascript">
function checkPswd() {
var confirmPassword = "pus";
var password = document.getElementById("pswd").value;
if (password == confirmPassword) {
window.location = "form.html";
} else {
document.getElementById("span").textContent = "Invalid Passcode";
}
}
</script>
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>

You didn't provide any code. I still went digging and took a look. Your problem is that you have two divs with the same ID.
<div class="icon fa fa-pencil" id="form-container">
<div class="icon fa fa-pencil" id="form-container">
I changed the 2nd one to id="form-container2" and then I changed var formContainer to look at the new ID and it worked as intended.
<div class="icon fa fa-pencil" id="form-container">
<div class="icon fa fa-pencil" id="form-container2">
var formContainer = $('#form-container2');
So your JS functions are confused because you have more than 1 element with the same ID is what it comes down to.

I used floatingMenu
and I want get ID numbers with Data-id but I can not get the ID number of the buttons
Output:
example.com/?id=undefined
Why am I getting this error?
var myDiv = document.querySelector('.designer-actions');
$.floatingMenu({
selector: '.designer-actions a[data-action="show-actions-menu"]',
items: [{
title: 'Open',
action: 'https://example.com/?id=' + myDiv.dataset.idNo
}, ]
});
ul.floating-menu {
position: absolute;
background-color: #000;
border-radius: 4px
}
ul.floating-menu[data-fm-floated="top"]:before {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: -9px;
left: 50%;
margin-left: -9px;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 9px solid #000
}
ul.floating-menu[data-fm-floated="left"]:before {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 50%;
margin-bottom: -9px;
right: -9px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #000
}
ul.floating-menu[data-fm-floated="right"]:before {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 50%;
margin-bottom: -9px;
left: -9px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 9px solid #000
}
ul.floating-menu[data-fm-floated="bottom"]:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: -9px;
left: 50%;
margin-left: -9px;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 9px solid #000
}
ul.floating-menu li {
position: relative;
float: left;
height: 100%
}
ul.floating-menu li a {
position: relative;
float: left;
color: #fff;
font-size: 13px;
padding: 4px 12px;
text-decoration: none;
line-height: 32px
}
ul.floating-menu li .fm-icon {
position: relative;
float: left;
margin-right: 8px;
font-size: 24px;
line-height: 32px;
color: #fff
}
ul.floating-menu.animated {
animation-duration: 0.2s;
-webkit-animation-duration: 0.2s;
-ms-animation-duration: 0.2s;
-moz-animation-duration: 0.2s;
-o-animation-duration: 0.2s
}
ul.floating-menu.visible-transit {
-o-transition: .2s;
-ms-transition: .2s;
-moz-transition: .2s;
-webkit-transition: .2s;
transition: .2s
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
#-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
#keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
[data-fm-floated="left"].fadeInPosition {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft
}
#-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
#keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
[data-fm-floated="right"].fadeInPosition {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight
}
#-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
#keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
[data-fm-floated="top"].fadeInPosition {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown
}
#-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
#keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
[data-fm-floated="bottom"].fadeInPosition {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://test3.moverals.com/mdm/floating-menu.js"></script>
<div id='designer-actions' class='designer-actions'>
<a class='icon ion-ios-more' data-idNo='1' href='javascript:void(null);' data-action='show-actions-menu' data-fm-floatTo='right'>Button1</a>
<a class='icon ion-ios-more' data-idNo='2' href='javascript:void(null);' data-action='show-actions-menu' data-fm-floatTo='right'>Button2</a>
</div>
JSFiddle

Updated answer:
You need to loop through the array:
$('.designer-actions a').each(function(){
idNo = $(this).data('idno');
$.floatingMenu({
selector: '.designer-actions a[data-action="show-actions-menu"]',
items: [{
title: 'Open',
action: 'https://example.com/?id=' + idNo
}, ]
});
});

i have a site that is functioning as expected in all browsers tested except ie11
there are links on the top and bottom of the page that scrolls the content left and right but it work sporadically in ie11. the problem is in the links at the top, clicking on "logo design" doesn't work properly. there is too many lines to post here but it is all in the fiddle http://jsfiddle.net/S5p58/1/
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Under Construction
</title>
<link rel="stylesheet" type="text/css" href="form.css">
<meta name="author" content="Advanced Design And Solutions">
<meta name="description" content="x">
<meta name="keywords" content="x">
<script type="text/javascript" src="script/script.js"></script>
</head>
<body onload="assign_math();">
</div>
<div id="container">
<div class="shadow_test"></div>
<div id="banner">
<img class="title_logo" src="images/bnr.png" alt="">
<!-- <a class="title_logo" href="index.php">
Advanced Design and Solutions
</a> -->
<div id="links">
<div onclick="to_wd();" class="banner_content on" id="link_1" href="">Web Design</div><div onclick="to_mm();" class="banner_content" id="link_2" href="">Marketing Material</div><div onclick="to_ld();" class="banner_content" id="link_3" href="">Logo Design</div><div onclick="to_bcd();" class="banner_content" id="link_4" href="">Business Card Design</div><span><img src="images/em_w.png" class="email_icon" onclick="show_email();"></span>
</div>
</div>
<div id="l_arrow" onclick="scroll_left();">
«
</div>
<div id="r_arrow" onclick="scroll_right();">
»
</div>
<div id="hider">
<div id="body">
<div id="content_pane_1">
<div class="slide_image_holder"></div>
<h2>
Web Design
</h2>
<p>
A website is an important
</p>
</div>
<div id="content_pane_2">
<div class="slide_image_holder"></div>
<h2>
Marketing Materials
</h2>
<p>
We design marketing
</p>
</div>
<div id="content_pane_3">
<div class="slide_image_holder"><img src="images/logo_bn.jpg" alt=""></div>
<h2>
Logo Design
</h2>
<p>
A logo is an integral part
</p>
</div>
<div id="content_pane_4">
<div class="slide_image_holder"><img src="images/bs_bn.jpg" alt=""></div>
<h2>
Business Card Design
</h2>
<p>
A business card is often
</p>
</div>
</div>
<div id="dummy"></div><div id="dummy2"></div>
</div>
<div id="footer">
<div id="footer_topline"></div>
<div onclick="to_wd();" class="footer_links" id="foot_1">Web Design</div><div onclick="to_mm();" class="footer_links" id="foot_2">Marketing Material Design</div><div onclick="to_ld();" class="footer_links" id="foot_3">Logo Design</div><div onclick="to_bcd();" class="footer_links" id="foot_4">Business Card Design</div ><div class="footer_links" href="index.php">© Copyright <?php echo date("Y") ?></div>
</div>
</div>
</body>
</html>
body, html {
padding:0;
margin:0;
min-height:100%;
height:100%;
font-family: sans-serif;
}
body {background-size:100%;}
#banner {
width: 910px;
height: 130px;
margin: 0 auto;
position: relative;
top: 80px;
}
#body {
min-height: 600px;
width: 4000px;
position: absolute;
z-index: -1;
}
.banner_content {
display: inline-block;
}
#container {
position: relative;
background:grey;
z-index: 0;
min-height: 100%;
background-size: 100%;
}
#content_pane_1 p, #content_pane_2 p, #content_pane_3 p, #content_pane_4 p {
background: rgba(40, 40, 40, 0.3);
box-shadow: 0px 0px 5px black;
}
.slide_image_holder {
width: 900px;
height: 300px;
background: blue;
box-shadow: 0px 0px 5px black;
margin-top: 30px;
margin-left: 5px;
}
.scroll_right {
-webkit-animation: shift_right 0.7s cubic-bezier(0, .68, .22, .99) forwards;
-o-animation:shift_right 0.7s cubic-bezier(0, .68, .22, .99) forwards;
animation:shift_right 0.7s cubic-bezier(0, .68, .22, .99) forwards;
}
#-webkit-keyframes shift_right {
0% {
left:0px;
}
30% {
left:10px;
}
60% {
left:-975px;
}
100% {
left:-955px;
}
}
#-moz-keyframes shift_right {
0% {left:0px;}
30% {left:10px;}
60% {left:-975px;}
100% {left:-955px;}
}
#-o-keyframes shift_right {
0% {left:0px;}
30% {left:10px;}
60% {left:-975px;}
100% {left:-955px;}
}
#keyframes shift_right {
0% {
left:0px;
}
30% {
left:10px;
}
60% {
left:-975px;
}
100% {
left:-955px;
}
}
.scroll_right_-955 {
-webkit-animation:shift_right_second 0.7s cubic-bezier(0, .68, .22, .99) forwards;
-o-animation:shift_right_second 0.7s cubic-bezier(0, .68, .22, .99) forwards;
animation:shift_right_second 0.7s cubic-bezier(0, .68, .22, .99) forwards;
}
#-webkit-keyframes shift_right_second {
0% {
left:-955px;
}
30% {
left: -945px;
}
60% {
left:-1930px;
}
100% {
left:-1910px;
}
}
#-moz-keyframes shift_right_second {
0% {
left:-955px;
}
30% {
left: -945px;
}
60% {
left:-1930px;
}
100% {
left:-1910px;
}
}
#-o-keyframes shift_right_second {
0% {
left:-955px;
}
30% {
left: -945px;
}
60% {
left:-1930px;
}
100% {
left:-1910px;
}
}
}
#keyframes shift_right_second {
0% {
left:-955px;
}
30% {
left: -945px;
}
60% {
left:-1930px;
}
100% {
left:-1910px;
}
}
.scroll_right_-1910 {
-webkit-animation: shift_right_third 0.7s cubic-bezier(0, .68, .22, .99) forwards;
-o-animation: shift_right_third 0.7s cubic-bezier(0, .68, .22, .99) forwards;
animation: shift_right_third 0.7s cubic-bezier(0, .68, .22, .99) forwards;
}
#-webkit-keyframes shift_right_third {
0% {
left:-1910px;
}
30% {
left: -1900px;
}
60% {
left:-2885px;
}
100% {
left:-2865px;
}
}
#-moz-keyframes shift_right_third {
0% {
left:-1910px;
}
30% {
left: -1900px;
}
60% {
left:-2885px;
}
100% {
left:-2865px;
}
}
#-o-keyframes shift_right_third {
0% {
left:-1910px;
}
30% {
left: -1900px;
}
60% {
left:-2885px;
}
100% {
left:-2865px;
}
}
#keyframes shift_right_third {
0% {
left:-1910px;
}
30% {
left: -1900px;
}
60% {
left:-2885px;
}
100% {
left:-2865px;
}
}
.scroll_right_-2865 {
-webkit-animation: shift_right_end 0.5s cubic-bezier(0, .68, .22, .99) forwards;
-o-animation: shift_right_end 0.5s cubic-bezier(0, .68, .22, .99) forwards;
animation: shift_right_end 0.5s cubic-bezier(0, .68, .22, .99) forwards;
}
#-webkit-keyframes shift_right_end {
0% {
left:-2865px;
}
50% {
left: -2885px;
}
100% {
left:-2865px;
}
}
#-moz-keyframes shift_right_end {
0% {
left:-2865px;
}
50% {
left: -2885px;
}
100% {
left:-2865px;
}
}
#-o-keyframes shift_right_end {
0% {
left:-2865px;
}
50% {
left: -2885px;
}
100% {
left:-2865px;
}
}
#keyframes shift_right_end {
0% {
left:-2865px;
}
50% {
left: -2885px;
}
100% {
left:-2865px;
}
}
.scroll_left_0 {
-webkit-animation: shift_left 0.7s cubic-bezier(0, .68, .22, .99) forwards;
-o-animation:shift_left 0.7s cubic-bezier(0, .68, .22, .99) forwards;
animation:shift_left 0.7s cubic-bezier(0, .68, .22, .99) forwards;
}
#-webkit-keyframes shift_left {
0% {
left:-955px;
}
30% {
left:-965px;
}
60% {
left:20px;
}
100% {
left:0px;
}
}
#-moz-keyframes shift_left {
0% {
left:-955px;
}
30% {
left:-965px;
}
60% {
left:20px;
}
100% {
left:0px;
}
}
#-o-keyframes shift_left {
0% {
left:-955px;
}
30% {
left:-965px;
}
60% {
left:20px;
}
100% {
left:0px;
}
}
#keyframes shift_left {
0% {
left:-955px;
}
30% {
left:-965px;
}
60% {
left:20px;
}
100% {
left:0px;
}
}
.scroll_left_-955 {
-webkit-animation: shift_left_second 0.7s cubic-bezier(0, .68, .22, .99) forwards;
-o-animation: shift_left_second 0.7s cubic-bezier(0, .68, .22, .99) forwards;
animation: shift_left_second 0.7s cubic-bezier(0, .68, .22, .99) forwards;
}
#-webkit-keyframes shift_left_second {
0% {
left:-1910px
}
30% {
left:-1920px;
}
60% {
left:-935px;
}
100% {
left:-955px;
}
}
#-moz-keyframes shift_left_second {
0% {
left:-1910px
}
30% {
left:-1920px;
}
60% {
left:-935px;
}
100% {
left:-955px;
}
}
#-o-keyframes shift_left_second {
0% {
left:-1910px
}
30% {
left:-1920px;
}
60% {
left:-935px;
}
100% {
left:-955px;
}
}
#keyframes shift_left_second {
0% {
left:-1910px
}
30% {
left:-1920px;
}
60% {
left:-935px;
}
100% {
left:-955px;
}
}
.scroll_left_-1910 {
-webkit-animation: shift_left_third 0.7s cubic-bezier(0, .68, .22, .99) forwards;
-o-animation: shift_left_third 0.7s cubic-bezier(0, .68, .22, .99) forwards;
animation: shift_left_third 0.7s cubic-bezier(0, .68, .22, .99) forwards;
}
#-webkit-keyframes shift_left_third {
0% {
left:-2865px;
}
30% {
left:-2875px;
}
60% {
left:-1890px;
}
100% {
left:-1910px;
}
}
#-moz-keyframes shift_left_third {
0% {
left:-2865px;
}
30% {
left:-2875px;
}
60% {
left:-1890px;
}
100% {
left:-1910px;
}
}
#-o-keyframes shift_left_third {
0% {
left:-2865px;
}
30% {
left:-2875px;
}
60% {
left:-1890px;
}
100% {
left:-1910px;
}
}
#keyframes shift_left_third {
0% {
left:-2865px;
}
30% {
left:-2875px;
}
60% {
left:-1890px;
}
100% {
left:-1910px;
}
}
.scroll_left_-0 {
-webkit-animation: shift_left_end 0.5s cubic-bezier(0, .68, .22, .99) forwards;
-o-animation: shift_left_end 0.5s cubic-bezier(0, .68, .22, .99) forwards;
animation: shift_left_end 0.5s cubic-bezier(0, .68, .22, .99) forwards;
}
#-webkit-keyframes shift_left_end {
0% {
left:0px;
}
50% {
left: 20px;
}
100% {
left:0px;
}
}
#-moz-keyframes shift_left_end {
0% {
left:-2865px;
}
50% {
left: -2885px;
}
100% {
left:-2865px;
}
}
#-o-keyframes shift_left_end {
0% {
left:-2865px;
}
50% {
left: -2885px;
}
100% {
left:-2865px;
}
}
#keyframes shift_left_end {
0% {
left:-2865px;
}
50% {
left: -2885px;
}
100% {
left:-2865px;
}
}
.footer_text_glow {
-webkit-animation: glow 0.8s;
-moz-animation: glow 0.8s;
-o-animation: glow 0.8s;
animation: glow 0.8s;
}
#-webkit-keyframes glow {
0% {
text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
color: white;
}
50% {
text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
color: #7db9e8;
}
100% {
text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
color: white;
}
}
#-moz-keyframes glow {
0% {
text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
color: white;
}
50% {
text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
color: #7db9e8;
}
100% {
text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
color: white;
}
}
#-o-keyframes glow {
0% {
text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
color: white;
}
50% {
text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
color: #7db9e8;
}
100% {
text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
color: white;
}
}
#keyframes glow {
0% {
text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
color: white;
}
50% {
text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
color: #7db9e8;
}
100% {
text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
color: white;
}
}
.wrap_left {
-webkit-animation: wrap_left 0.7s cubic-bezier(0, .68, .22, .99) forwards;
-moz-animation: wrap_left 0.7s cubic-bezier(0, .68, .22, .99) forwards;
-o-animation: wrap_left 0.7s cubic-bezier(0, .68, .22, .99) forwards;
animation: wrap_left 0.7s cubic-bezier(0, .68, .22, .99) forwards;
}
#-webkit-keyframes wrap_left {
0% {
left:0px;
opacity: 1;
}
30% {
left:10px;
}
50% {
opacity: 0;
}
60% {
left:-2885px;
opacity: 0;
}
100% {
left:-2865px;
opacity: 1;
}
}
#-moz-keyframes wrap_left {
0% {
left:0px;
opacity: 1;
}
30% {
left:10px;
}
50% {
opacity: 0;
}
60% {
left:-2885px;
opacity: 0;
}
100% {
left:-2865px;
opacity: 1;
}
}
#-o-keyframes wrap_left {
0% {
left:0px;
opacity: 1;
}
30% {
left:10px;
}
50% {
opacity: 0;
}
60% {
left:-2885px;
opacity: 0;
}
100% {
left:-2865px;
opacity: 1;
}
}
keyframes wrap_left {
0% {
left:0px;
opacity: 1;
}
30% {
left:10px;
}
50% {
opacity: 0;
}
60% {
left:-2885px;
opacity: 0;
}
100% {
left:-2865px;
opacity: 1;
}
}
.wrap_right {
-webkit-animation: wrap_right 0.7s cubic-bezier(0, .68, .22, .99) forwards;
-moz-animation: wrap_right 0.7s cubic-bezier(0, .68, .22, .99) forwards;
-o-animation: wrap_right 0.7s cubic-bezier(0, .68, .22, .99) forwards;
animation: wrap_right 0.7s cubic-bezier(0, .68, .22, .99) forwards;
}
#-webkit-keyframes wrap_right {
0% {
left:-2865px;
opacity: 1;
}
30% {
left:-2855px;
}
50% {
opacity: 0;
}
60% {
left: 20px;
}
100% {
left:0px;
opacity: 1;
}
}
#container:after {
content:"";
position: absolute;
width: 100%;
height: 100%;
background: url(images/pattern.png);
top: 0px;
opacity: .1;
z-index: -2;
background-size: 7px;
}
#container:before {
content:"";
position: absolute;
width: 100%;
height: 20px;
top: 0px;
border-bottom:1px dashed white;
opacity: .5;
}
#content_pane_1, #content_pane_2, #content_pane_3, #content_pane_4 {
width: 910px;
min-height: 600px;
/* background: orange; */
position: relative;
float: left;
margin-left: 45px;
}
h2 {
text-shadow: 1px 1px 2px black;
padding-left: 20px;
margin-top: 25px;
margin-left: 10px;
}
#content_pane_1 h2, #content_pane_2 h2, #content_pane_3 h2, #content_pane_4 h2, #content_pane_1 p, #content_pane_2 p, #content_pane_3 p, #content_pane_4 p {
color: white;
font-family:"yi_baiti";
}
#content_pane_1 p, #content_pane_2 p, #content_pane_3 p, #content_pane_4 p {
font-size: 20px;
padding: 20px;
margin-left: 5px;
margin-right: 5px;
}
#hider {
min-height: 600px;
width: 1000px;
position: absolute;
margin-left: -500px;
left: 50%;
overflow: hidden;
margin-top: 10px;
}
#media screen and (max-width: 1175px) {
#l_arrow, #r_arrow {
display: none;
}
}
#l_arrow, #r_arrow {
cursor: pointer;
background-color: rgb(230, 230, 230);
background: repeating-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.1) 7.5%), repeating-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 4%, rgba(0, 0, 0, 0.03) 4.5%), repeating-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, 0.15) 2.2%), linear-gradient(180deg, rgb(199, 199, 199) 0%, rgb(230, 230, 230) 47%, rgb(199, 199, 199) 53%, rgb(179, 179, 179)100%);
text-shadow: rgba(102, 102, 102, 0.5) 0 -1px 0, rgba(255, 255, 255, 0.6) 0 2px 1px;
box-shadow: inset rgb(38, 38, 38) 0 0px 0px 3px,
/* border */
inset rgba(38, 38, 38, 0.8) 0 -1px 5px 4px,
/* soft SD */
inset rgba(0, 0, 0, 0.25) 0 -1px 0px 7px,
/* bottom SD */
inset rgba(255, 255, 255, 0.7) 0 2px 1px 7px,
/* top HL */
rgba(0, 0, 0, 0.15) 0 -5px 6px 4px,
/* outer SD */
rgba(255, 255, 255, 0.2) 0 3px 4px 4px;
width: 50px;
height: 50px;
position: absolute;
line-height: 50px;
text-align: center;
color: rgba(40, 40, 40, 0.4);
font-size: 30px;
-moz-transition: color .1s;
-webkit-transition: color .1s;
-o-transition: color .1s;
transition: all .1s;
z-index: 1;
border-radius: 0px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
top: 390px;
}
#l_arrow {
margin-left: -565px;
left: 50%;
}
#l_arrow:after {
content:"";
position: absolute;
height: 570px;
width: 45px;
left: 65px;
top: -230px;
box-shadow: 15px 0px 25px -25px rgb(0, 0, 0) inset, 34px 0px 30px -34px rgba(0, 0, 0, 0.32) inset, inset 5px 0px 3px -2px rgba(40, 40, 40, 0.5);
border-bottom-right-radius: 100px 250px;
border: 1px solid rgba(0, 0, 0, 0);
border-left: 1px solid rgb(36, 36, 36);
border-top-right-radius: 100px 250px;
}
#r_arrow {
right: 50%;
margin-right: -565px;
}
#r_arrow:after {
content:"";
position: absolute;
height: 570px;
width: 24px;
right: 65px;
top: -230px;
box-shadow: inset -15px 0px 25px -25px rgba(0, 0, 0, 1), inset -34px 0px 30px -34px rgba(0, 0, 0, 0.75);
border-top-left-radius: 120px 120px;
border-bottom-left-radius: 120px 120px;
border-right: 1px solid rgb(36, 36, 36);
}
.title_logo {
position: absolute;
top: -15px;
left: 18px;
width: 600px;
}
#links {
width: 640px;
color: white;
font-size: 16px;
position: relative;
z-index: 1;
left: 30px;
top: 50px;
}
#links a, #links .banner_content {
cursor: pointer;
position: relative;
text-decoration: none;
margin-right: 20px;
text-align: center;
display: inline-table;
transition: color 1s;
-moz-transition: color .1s;
-webkit-transition: color .1s;
-o-transition: color .1s;
}
.banner_content {
margin-right: 10px;
}
.banner_content:hover {
color: #7db9e8;
}
.banner_content:after {
box-shadow: 0px 4px 7px -2px rgba(40, 40, 40, .5);
width: 90%;
display: inline-block;
height: 10px;
position: absolute;
top: 15px;
left: 50%;
margin-left: -45%;
}
.banner_content:before {
width: 50%;
height: 5px;
background: gold;
border-radius: 0px 0px 2px 2px;
display: block;
position: absolute;
top: 26px;
left: 50%;
margin-left: -25%;
}
.on.banner_content:after, .on.banner_content:before {
content:"";
}
.off.banner_content:before {
-webkit-animation: tab_off 0.4s linear forwards;
-moz-animation: tab_off 0.4s linear forwards;
-o-animation: tab_off 0.4s linear forwards;
animation: tab_off 0.4s linear forwards;
content:"";
}
#-webkit-keyframes tab_off {
0% {height: 5px;}
20% {height: 5px;}
30% {height: 8px;}
40% {height: 8px;}
55% {height: 0px;}
100% {height: 0px;}
}
#-moz-keyframes tab_off {
0% {
height: 5px;
}
20% {
height: 5px;
}
30% {
height: 8px;
}
40% {
height: 8px;
}
55% {
height: 0px;
}
100% {
height: 0px;
}
}
#-o-keyframes tab_off {
0% {
height: 5px;
}
20% {
height: 5px;
}
30% {
height: 8px;
}
40% {
height: 8px;
}
55% {
height: 0px;
}
100% {
height: 0px;
}
}
#keyframes tab_off {
0% {
height: 5px;
}
20% {
height: 5px;
}
30% {
height: 8px;
}
40% {
height: 8px;
}
55% {
height: 0px;
}
100% {
height: 0px;
}
}
.off.banner_content:after {
-webkit-animation: tab_off_shadow 0.45s linear forwards;
-moz-animation: tab_off_shadow 0.45s linear forwards;
-o-animation: tab_off_shadow 0.45s linear forwards;
animation: tab_off_shadow 0.45s linear forwards;
content:"";
}
#-webkit-keyframes tab_off_shadow {
0% {
box-shadow: 0px 4px 7px -2px rgba(40, 40, 40, .5);
}
80% {
box-shadow: 0px 4px 7px -2px rgba(40, 40, 40, .5);
}
100% {
box-shadow: 0px 0px 0px 0px rgba(40, 40, 40, .5);
}
}
#-moz-keyframes tab_off_shadow {
0% {
box-shadow: 0px 4px 7px -2px rgba(40, 40, 40, .5);
}
80% {
box-shadow: 0px 4px 7px -2px rgba(40, 40, 40, .5);
}
100% {
box-shadow: 0px 0px 0px 0px rgba(40, 40, 40, .5);
}
}
#-o-keyframes tab_off_shadow {
0% {
box-shadow: 0px 4px 7px -2px rgba(40, 40, 40, .5);
}
80% {
box-shadow: 0px 4px 7px -2px rgba(40, 40, 40, .5);
}
100% {
box-shadow: 0px 0px 0px 0px rgba(40, 40, 40, .5);
}
}
#keyframes tab_off_shadow {
0% {
box-shadow: 0px 4px 7px -2px rgba(40, 40, 40, .5);
}
80% {
box-shadow: 0px 4px 7px -2px rgba(40, 40, 40, .5);
}
100% {
box-shadow: 0px 0px 0px 0px rgba(40, 40, 40, .5);
}
}
.on.tab_on.banner_content:before {
-webkit-animation: tab_on 0.4s linear forwards;
-moz-animation: tab_on 0.4s linear forwards;
-o-animation: tab_on 0.4s linear forwards;
animation: tab_on 0.4s linear forwards;
}
#-webkit-keyframes tab_on {
0% {
height: 0px;
}
20% {
height: 0px;
}
30% {
height: 8px;
}
40% {
height: 8px;
}
55% {
height: 5px;
}
100% {
height: 5px;
}
}
#-moz-keyframes tab_on {
0% {
height: 0px;
}
20% {
height: 0px;
}
30% {
height: 8px;
}
40% {
height: 8px;
}
55% {
height: 5px;
}
100% {
height: 5px;
}
}
#-o-keyframes tab_on {
0% {
height: 0px;
}
20% {
height: 0px;
}
30% {
height: 8px;
}
40% {
height: 8px;
}
55% {
height: 5px;
}
100% {
height: 5px;
}
}
#keyframes tab_on {
0% {
height: 0px;
}
20% {
height: 0px;
}
30% {
height: 8px;
}
40% {
height: 8px;
}
55% {
height: 5px;
}
100% {
height: 5px;
}
}
#footer {
width: 1000px;
height: 200px;
margin: 0 auto;
margin-top: 600px;
position: relative;
}
#footer_topline {
width: 850px;
height: 5px;
border-radius: 2px;
background: white;
margin: 0 auto;
margin-bottom: 5px;
}
.footer_links:last-child {
float: right;
margin-right: 75px;
}
.footer_links {
color: white;
text-decoration: none;
margin-left: 20px;
font-family:"yi_baiti";
float: left;
font-size: 16px;
cursor: pointer;
}
#foot_1 {
margin-left: 75px;
}

There is an extra closing curly brace when defining ".scroll_right_-955" rule in CSS. Under "#-o-keyframes shift_right_second" animation rule.
#-o-keyframes shift_right_second {
0% {
left:-955px;
}
30% {
left: -945px;
}
60% {
left:-1930px;
}
100% {
left:-1910px;
}
}
}