CSS-LESS animation fails to function

Question

CSS-LESS animation fails to function

I'm currently facing an issue with my script. In the section designated for avatars - images, I am attempting to change the border color upon hovering over the image, however, it doesn't seem to be working as expected.


img {
    margin-right:15px;
    float: left;
    width:68px;
    height: 68px;
    .bdr(40px);
    border:5px solid #eeeeee;
}
img:hover {
    -webkit-animation: avatarAnimation 1s;
    -moz-animation: avatarAnimation 1s;
    -o-animation: avatarAnimation 1s;
    animation: avatarAnimation 1s;
}
@keyframes avatarAnimation {
    25% {
        background: red;
    }
    50% {
        border-color: #f27935;
    }
    75% {
        border-color: #1fbba6;
    }
}

css less

Answer 1

Answer №1

Consider implementing -webkit-keyframes to ensure compatibility with Chrome.

Answer 2

Consider implementing -webkit-keyframes to ensure compatibility with Chrome.

Answer 3

Answer №2

If you are utilizing Less, you have the flexibility to address various platforms by using a mixin:

.create-animations(@name) {
  @keyframes @name {
    // content
  }
  @-webkit-keyframes @name {
    // content
  }
}

Below is an illustration employing another mixin for generating your content (including properties for each step in a variable):

// define the properties for each step
@properties: ~'background: red', ~'border-color:#f27935', ~'border-color:#1fbba6';

// a mixin for creating each step
.create-animation-step(@step, @count) when (@count > 0) {
  .create-animation-step(@step, (@count - 1));
  @pos: @step * (@count);
  @{pos} {top: extract(@properties, @count);}
}

.create-animations(@name) {
  @keyframes @name {
    .create-animation-step(25%, length(@properties));
  }
  @-webkit-keyframes @name {
    .create-animation-step(25%, length(@properties));
  }
}

.create-animations(avatarAnimation);

This will result in the following CSS code being generated:

@keyframes avatarAnimation {
  25% {
    top: background: red;
  }
  50% {
    top: border-color:#f27935;
  }
  75% {
    top: border-color:#1fbba6;
  }
}
@-webkit-keyframes avatarAnimation {
  25% {
    top: background: red;
  }
  50% {
    top: border-color:#f27935;
  }
  75% {
    top: border-color:#1fbba6;
  }
}

Answer 4

If you are utilizing Less, you have the flexibility to address various platforms by using a mixin:

.create-animations(@name) {
  @keyframes @name {
    // content
  }
  @-webkit-keyframes @name {
    // content
  }
}

Below is an illustration employing another mixin for generating your content (including properties for each step in a variable):

// define the properties for each step
@properties: ~'background: red', ~'border-color:#f27935', ~'border-color:#1fbba6';

// a mixin for creating each step
.create-animation-step(@step, @count) when (@count > 0) {
  .create-animation-step(@step, (@count - 1));
  @pos: @step * (@count);
  @{pos} {top: extract(@properties, @count);}
}

.create-animations(@name) {
  @keyframes @name {
    .create-animation-step(25%, length(@properties));
  }
  @-webkit-keyframes @name {
    .create-animation-step(25%, length(@properties));
  }
}

.create-animations(avatarAnimation);

This will result in the following CSS code being generated:

@keyframes avatarAnimation {
  25% {
    top: background: red;
  }
  50% {
    top: border-color:#f27935;
  }
  75% {
    top: border-color:#1fbba6;
  }
}
@-webkit-keyframes avatarAnimation {
  25% {
    top: background: red;
  }
  50% {
    top: border-color:#f27935;
  }
  75% {
    top: border-color:#1fbba6;
  }
}

Answer 5

Answer №3

Starting from version 2 of Less, it is recommended to use the autoprefix postprocessor plugin for optimal results.

To utilize the autoprefix plugin, your Less code should follow the structure outlined below (save it in a file named file.less):

img {
  margin-right: 15px;
  float: left;
  width: 68px;
  height: 68px;
  border: 5px solid #eeeeee;
  &:hover {
    animation: avatarAnimation 1s;
  }
}

@keyframes avatarAnimation {
  25% {
    background: red;
  }
  50% {
    border-color: #f27935;
  }
  75% {
    border-color: #1fbba6;
  }
}

In the example above, the .bdr(40px); call has been omitted. Afterwards, you can compile the code using lessc --autoprefix file.less, resulting in the following output:

img {
  margin-right: 15px;
  float: left;
  width: 68px;
  height: 68px;
  border: 5px solid #eeeeee;
}
img:hover {
  -webkit-animation: avatarAnimation 1s;
          animation: avatarAnimation 1s;
}
@-webkit-keyframes avatarAnimation {
  25% {
    background: red;
  }
  50% {
    border-color: #f27935;
  }
  75% {
    border-color: #1fbba6;
  }
}
@keyframes avatarAnimation {
  25% {
    background: red;
  }
  50% {
    border-color: #f27935;
  }
  75% {
    border-color: #1fbba6;
  }
}

If desired, you can also specify the target browsers for your project like so:

lessc --autoprefix="> 1%, last 2 versions, Firefox ESR, Opera 12.1" file.less

Answer 6

Starting from version 2 of Less, it is recommended to use the autoprefix postprocessor plugin for optimal results.

To utilize the autoprefix plugin, your Less code should follow the structure outlined below (save it in a file named file.less):

img {
  margin-right: 15px;
  float: left;
  width: 68px;
  height: 68px;
  border: 5px solid #eeeeee;
  &:hover {
    animation: avatarAnimation 1s;
  }
}

@keyframes avatarAnimation {
  25% {
    background: red;
  }
  50% {
    border-color: #f27935;
  }
  75% {
    border-color: #1fbba6;
  }
}

In the example above, the .bdr(40px); call has been omitted. Afterwards, you can compile the code using lessc --autoprefix file.less, resulting in the following output:

img {
  margin-right: 15px;
  float: left;
  width: 68px;
  height: 68px;
  border: 5px solid #eeeeee;
}
img:hover {
  -webkit-animation: avatarAnimation 1s;
          animation: avatarAnimation 1s;
}
@-webkit-keyframes avatarAnimation {
  25% {
    background: red;
  }
  50% {
    border-color: #f27935;
  }
  75% {
    border-color: #1fbba6;
  }
}
@keyframes avatarAnimation {
  25% {
    background: red;
  }
  50% {
    border-color: #f27935;
  }
  75% {
    border-color: #1fbba6;
  }
}

If desired, you can also specify the target browsers for your project like so:

lessc --autoprefix="> 1%, last 2 versions, Firefox ESR, Opera 12.1" file.less

CSS-LESS animation fails to function

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to target a specific class to exclude in CSS styling?

Creating tags in HTML and displaying them on a webpage

"Exploring the versatility of Tailwind css: A guide to implementing multiple themes

Is the dropdown menu fully functional in the latest release of Bootstrap?

What is preventing me from modifying the icon on a dropdown menu?

Creating a full-width header in React: A step-by-step guide

Discover the magic of Bootstrap 3.0 Popovers and Tooltips

How can I use JavaScript to modify the style of the first unordered list (ul) element without affecting the

Trouble with margins on tr elements and borders in CSS and HTML

Is the cursor out of bounds?

What is the process for creating a polygon button similar to this one?

Is there a way to apply a css class to all nested elements in Angular 6 using Ngx Bootstrap?

Ways to create a responsive header image on a website

Cite an element that has been dynamically loaded

Stylish Bootstrap sidebar featuring a vibrant background hue

Gradient transition effect changing background color from bottom to top

Customize the appearance of the active head panel in the Bootstrap Accordion

Creating dynamic button animations with Bootstrap 4 without impacting neighboring rows

Ways to revamp the overall aesthetic of the entire project

Implementing a Responsive Form on an Image Using Bootstrap