The motion defined in the CSS keyframes is failing to animate as expected

http://plnkr.co/edit/46U9HFEJ3bWoYnvmeulY?p=preview

I am trying to create a keyframes animation in the plnkr above that will make links move from left to right with an opacity change on load. However, I am facing an issue where only the opacity change is visible and the horizontal movement, which should go from 100px left to 0px, is not working as expected.

Any assistance with this would be greatly appreciated.

See the code snippet below:

CSS:

a {
  /*On Load Animation*/
  animation: loadLink 0.5s ease;
  -moz-animation: loadLink 0.5s ease;
  -o-animation: loadLink 0.5s ease;
  -webkit-animation: loadLink 0.5s ease;
}

/*On Load Animation*/
@keyframes loadLink {
  from {opacity: 0; left: -100px;}
  to {opacity: 1; left: 0px;}
}

@-moz-keyframes loadLink {
  0% {opacity: 0; left: -100px;}
  100% {opacity: 1; left: 0px;}
}

@-o-keyframes loadLink {
  0% {opacity: 0; left: -100px;}
  100% {opacity: 1; left: 0px;}
}

@-webkit-keyframes loadLink {
  0% {opacity: 0; left: -100px;}
  100% {opacity: 1; left: 0px;}
}

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <ul style="list-style-type:none">
    <li><a class="google" href="http://www.google.com" target="_blank">Google</a></li>
    <li><a class="yahoo" href="http://www.yahoo.com" target="_blank">Yahoo</a></li>
  </ul>

</html>

Answer №1

Include

a {
  display: block;
}

in your stylesheet

Answer №2

li {
  padding: 12px;
}
a {
  /*Fade-in Animation*/
  animation: fadeIn 0.5s ease;
  -moz-animation: fadeIn 0.5s ease;
  -o-animation: fadeIn 0.5s ease;
  -webkit-animation: fadeIn 0.5s ease;
  position: absolute;
  left: 0px;
}

Check out the updated code snippet (click here)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for creating a clickable textbox

Does anyone know how to make a textbox clickable even when it is set as readonly. I'm looking for a way to make my textboxes clickable like buttons because I have some future plans for them. <input type="text" readonly value="Click me" id="clickm ...

Strategies for Preserving Added Field Data Using JQuery

I am working on a code that dynamically adds fields to a form, you can see it in action on this jsFiddle. My question is, is there a way to keep the newly added fields even after the form is submitted and the user returns to the page? I'm not looking ...

showcasing a set of div elements by using forward and backward buttons

I am dealing with 5 divs that have text content inside. To navigate through each div, I have implemented a back and next button system. <a href="" class="back-btn off">Back</a> | <a href="" class="next-btn">Next</a> <div class ...

What are the techniques for implementing an if statement in CSS or resolving it through JavaScript?

Demo available at the bottom of the page Within my code, there is a div called #myDiv that defaults to an opacity of 0. Upon hovering over #myDiv, the opacity changes to 1. See the CSS snippet below: #myDiv { opacity: 0; } #myDiv:hover { opacity: 1 ...

Difficulty filling height with Bootstrap 4 flex-grow

I am in need of creating a layout with a header div at the top (that can be filled with content), a footer div at the bottom, and a middle div with an adaptable height to fill the entire screen. Check out my code below: <div class="container-fluid p-0 ...

Start flicker issue in Vue 3 transition

I have created a carousel of divs that slide in and out of view on the screen. However, I am facing an issue where during the start of each transition, when a new div is rendered (i.e., the value of carousel_2 changes), it appears without the transition-en ...

Embed Javascript Code Within Text Field

Is there a way to incorporate this JavaScript into the "price" text value? Below is the code snippet: <script> function myFunction() { var x = document.getElementById('car-select')[document.getElementById('car-selec ...

Sliding horizontally with a responsive touch

I am looking to implement a horizontal responsive page navigation, similar to the illustration shown below: This is my current progress: DEMO $(document).ready(function () { var slideNum = $('.page').length, wrapperWidth = 100 * s ...

The hamburger menu appears to be missing when viewing in Safari, while it functions properly on both Chrome and Firefox browsers

My website has a responsive menu that functions perfectly in Chrome and Firefox, but encounters issues in Safari on mobile devices. The site is built using Elementor WordPress and I believe adding some -webkit- properties could solve the problem, but I&apo ...

Avoiding double tapping to zoom on Chrome Android while using the desktop version of a website

Is there a way to disable zooming when double clicking in Google Chrome with the desktop site enabled? I attempted to use <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> without success. I al ...

Help with Crafting Responsive CSS Design

I am seeking help to better comprehend the concept of responsive design through this question. Let's imagine a header on a standard desktop screen. Within that, I have a div element containing the information I wish to showcase. .hdrinfo{ width: ...

Using AngularJS, passing a value from outside a directive to the directive and detecting changes in the

As a newcomer to AngularJs, I am facing a challenge in retrieving data from outside a directive. The scenario involves multiple input fields being updated and the necessity for the directive to process this information. For instance, consider the code sni ...

What is the best method for eliminating buttons and text in a row using CSS?

I faced an issue when trying to create a row, so I improvised with the following setup. However, I actually need a proper row layout for both the Google button and telephone number button. Here are my CSS snippets: .google-button { color: white; borde ...

Using PHP to perform live calculations with arrays in real time

Currently, I am working on developing a new system for a client that allows them to create bookings and invoices to send to their clients. One specific requirement my client has is the need for a table column to be added below the container columns in whi ...

Display a petite popup above the selected text within the Code Mirror editor

I have been utilizing the following code snippet to highlight text segments in Codemirror, a renowned code editor and syntax highlighter that can be downloaded from this link. Despite referring to the documentation, I am still unable to grasp how this fun ...

Guide on integrating a dynamic element within another element in Angular

Imagine a scenario where we have the following html structure <div [innerHTML]="contentFromAPI | safeHTML"></div> The content retrieved from the api contains multiple HTML elements, resulting in a structure like this: <div> &l ...

Utilizing tags within the pre tag to incorporate additional styles

Using pre tags to display code works well, but I need to style certain parts of the code in green. However, when I wrap the desired code in a <div> tag with styling, it affects formatting by adding newlines and swallowing spacing. How can I achieve t ...

Use jQuery ajax to send form data and display the received information in a separate div

I'm working on a PHP test page where I need to submit a form with radios and checkboxes to process.php. The result should be displayed in #content_result on the same page without refreshing it. I attempted to use jQuery Ajax for this purpose, but noth ...

Switch the Header Image on a Page in WordPress

I am currently using the Sunrise Theme from s5themes.com and I have a question regarding the header image on individual pages. It seems that all pages are displaying the same header image as the homepage, which is not what I want. Attached below is a scre ...

Improve the way you manage the active selection of a button

ts isDayClicked: { [key: number]: boolean } = {}; constructor() { } setSelectedDay(day: string, index: number): void { switch (index) { case 0: this.isDayClicked[0] = true; this.isDayClicked[1] = false; this.isDay ...