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 struggling to understand why this code works: input[ type = "text" ]:last-of-type:focus{ border:1px solid red; } but this code doesn't work: input[ type = "checkbox" ]:last-of-type:checked{ border:1px solid red; } The example given with t ...
For my project, I am utilizing "a href" to open a windows application. <a href={`enter app here`}> //Similar concept as mailto The issue I am facing is that it opens the application in the background rather than bringing it to the foreground. Esse ...
I am facing an issue with removing HTML divs generated using jinja2 as shown below: {% for student in students %} <div class="item" id="{{ student.id }}_div"> <div class="right floated content"> <div class="negative ui button compa ...
I am using chartjs charts within bootstrap rows and columns. The number of columns per row can be dynamically changed. For example, I could rebuild my rows with the following markup: const twoColumn = spacerColumn + "<div class=&ap ...
I have implemented $window.addEventListener('beforeunload' to detect changes on a page successfully. Additionally, I am using $transitions.onStart... to monitor navigation with the browser buttons. I find it puzzling though, as my HTML template l ...
When it comes to customizing components using material-ui, the process can be a bit tricky. Here's how you can do it: const styles = { root: { '&$disabled': { color: 'white', }, }, disabled: {}, // This is i ...
I have successfully created a form with validation using TypeScript Material UI and Formik. Now, I am looking to enhance the visual appeal by adding a material UI Icon within the textfield area. Below is a snippet of my code: import React from 'reac ...
Is there a way to calculate the Total LI width and then set the width for the parent div? Here is an example of my code: <ul> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds&l ...
.headerDesc { width: 100% + 1px; height: 70px; background-color: #4d2765; margin: 0 -8px; } .headerDesc span { padding: 5px; position: absolute; color: white; font-family: 'Arial', sans-serif; text-al ...
The following code is used: jQuery(document).ready(function() { console.log($(this)); }); After running this code, the object displayed in the console is: [Document mypage.html#weather] How can I retrieve the last ID from this object? In this ...
Having trouble with a blurry pop-up form when clicking the button? Check out the code I've used below: <button class="btn btn-default" data-toggle="modal" data-target="#myModal">ENQUIRE NOW</button> ...
Is there a way to extract href data from a website page and input it into a table using jQuery? I often have clients who need me to transfer links from their old sites to my CMS. If we can put these links into a spreadsheet format, it would make importing ...
I've been working on setting backgrounds dynamically with a jQuery script, but it seems like the .css function is not working as expected. Here's the code snippet: $(document).ready(function () { $(".VociMenuSportG").each(function () { ...
Having an unordered list with the id mainul in the navigation bar is causing a problem when the page reloads. The navigation bar always starts at the beginning, but I would like it to automatically scroll to the active li element. This is my HTML code: & ...
I am attempting to embed a JS variable into HTML tags, but for some reason the movie is not loading. Here is the code I am using: var filmLocation = "images/main.swf"; <script>document.write('<PARAM name="movie" value="' + filmLocat ...
My goal is to have my website refresh with a random piece of text and image from an array when a button is clicked. I have successfully implemented the text generation part, but I am unsure how to incorporate images. Here is the current script for the text ...
I have a form that appears when a button is clicked, and the save button saves input values into an object. Is there a more efficient way to write this function if I need to create 9 more buttons with different data-id attributes (e.g. data-id="2" and so ...
I am currently working on developing a layout that includes a sticky header and sidebar for my content list. My goal is to have the sidebar scroll down as I move through the page content, while also ensuring that the header scrolls horizontally along with ...
I'm currently in the process of developing a new website. The link to access the site is: One thing I am eager to achieve is having birds from this specific link incorporated into my background: I have attempted various methods without success. If a ...
I'm curious about how to prevent jQuery UI from adding any classes when initializing $.tabs(). This is the structure of my HTML: <link href="smoothness/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" /> ... <link href="estilos ...