I recently tried to create a bouncing arrow following a tutorial, but the code I used is almost identical with minor differences.
However, when I try to incorporate it into my hero unit, the animation does not work as expected.
The issue could be related to the transform or keyframe mixins that were implemented...
You can view the JSFiddle here: http://jsfiddle.net/x9hxfusa/
Remember to place the keyframes and mixins declarations at the beginning of your code. They need to be declared before being used.
I made some adjustments and simplified the code for you. I believe you can enhance the animation for a smoother effect based on your preferences. Don't forget to include cross-browser support or utilize SCSS for better management: jsFiddle
CSS
body { background-color: black; }
.arrow {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 40px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3...
}
The main issue seems to be with the mixins, but I took a different approach to provide a simpler solution.
Edit: Initially, I attempted to make some changes but overlooked refreshing my jsFiddle which led me to miss the obvious resolution pointed out by @Oriol. The key problem is that your keyframe & mixin code appears after the animation code (or at the beginning of your CSS for clarity). You have the choice to keep your current code structure or give my simplified approach a try.
It is necessary to establish
@mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
@mixin keyframes($animation-name) {
@-webkit-keyframes $animation-name {
@content;
}
@-moz-keyframes $animation-name {
@content;
}
@-ms-keyframes $animation-name {
@content;
}
@-o-keyframes $animation-name {
@content;
}
@keyframes $animation-name {
@content;
}
}
@mixin animation($str) {
-webkit-animation: #{$str};
-moz-animation: #{$str};
-ms-animation: #{$str};
-o-animation: #{$str};
animation: #{$str};
}
Prior to importing keyframes and transform, it is essential to define the bounce class in a different manner (remove ''):
.bounce {
@include animation(bounce 2s infinite);
}
I'm currently facing an issue where I need to apply a class to an element when a certain data property changes. My approach involves using a watcher to monitor the value change and adding a class through JavaScript, as demonstrated in the code snippet ...
I am struggling to accurately describe my issue, making it difficult to find a solution. I have an array called tempData generated from a text file that I want to reference with variables of the same name as the strings in the array. var red = new Image ...
Is there a way to send an HTML file along with images using express? I have the following code that handles sending the initial page (index.html) to users. However, this page contains elements such as images and css files which are not being transferred p ...
I am currently working on a horizontal navbar with horizontal submenus. One issue I am facing is getting the elements in mysubnav to align centrally instead of being pushed to the left all the time. If you need a visual representation of what I mean, plea ...
I understand that this tag specifies the file type you are linking to (usually "text/css") for . But what is the reason behind including this information? ...
How do I retrieve the id of a dynamically created class within a while loop, where the id corresponds to the user who posted it, and then send this id to PHP? Here's exactly what I'm trying to achieve: HTML: <div class='lol' id=&a ...
Our form, created using the Wordpress - Avada theme, needs an autoscroll feature. As users answer questions, the next question appears below, but this is not immediately visible on mobile devices. To address this, we require autoscroll functionality. The ...
My Raspberry Pi hosts a local website that does not require an internet connection. I want the webpage to display text from a large file line by line as users access it. For example, if the text file contains: Hello How are You doing Today? The brow ...
I am trying to sort an array in a specific order var customOrder = { "1st Presentation / Meeting": 0, "Follow-On Meetings": 1, "Hold\/Uncategorized": 2, "MGL": 3, "PGL": 4, "BGL": 5, "RGL": 6, "SGL": 7, "Uncategorized Leads": 8, ...
There is text displayed on top of an image within a div container that functions as a link. <a href="https://link.com" style="color:white"> <div class="thumbnail"> <img src="image.jpg" clas ...
I am struggling to get the restart button to display the start screen again. Even though I have called the restart function within the clearColors function, which should show the start screen, it hasn't been effective so far. Initially, in the fadeOut ...
Is there a way to create a select box with multiple options that are based on one row from my MySQL table? For example, <?php if(!empty($row['size'])) { ?> <label>Size</label> ...
I have two elements - an anchor with an onclick function and an input with an onfocus event. The anchor is toggled by the input button; meaning, when the button is in focus, the anchor is displayed, and when it loses focus, the anchor is hidden. I'm l ...
I am working on a project that involves a list of items labeled as li. For example: <ul class="list"> <li class="checked">Groceries <span>×</span></li> <li>Medicine <span>& ...
Is it possible to read a javascript or jquery variable through php code? For example: <script> var num = 3; </script> <php? $a = 20; $b = num*$a; // Is this valid? ?> Any thoughts on this? ...
I am working on a project where I have an image with tags underneath that correspond to different parts of the image. For example, if the image is of a dog, one of the tags could be 'nose', indicating the portion of the image around the dog' ...
How can I vertically align the user and the search bar on the right side of the page? #search { float: right; margin-top: 9px; width: 250px; } .search { width: 230px; height: 30px; position: relative; line-height: 22px; } ...
In the process of modifying a form view on OpenERP7 through inheritance, I am attempting to adjust the width of a field to 50% (currently at 40%). While I have successfully altered the style and width of the field using pixels, any attempt to input a perce ...
My customer is requesting that I validate the HTML5 & CSS3 code using W3. I plan on incorporating Bootstrap 3.3.4 into the project, but after including it and checking at , I discovered 32 errors and 142 warnings. The W3C CSS Validator results for (C ...
On the lookout for a way to add a combo box on my website's homepage, which can direct users to specific internal links once the correct value is chosen. Here's the test code I've come up with so far, but it doesn't seem to be working a ...