https://github.com/aweary/gradient-animation.scss

Sass mixin that lets anyone easily implement an animated background gradient.
https://github.com/aweary/gradient-animation.scss

Last synced: 12 days ago
JSON representation

Sass mixin that lets anyone easily implement an animated background gradient.

• Host: GitHub
• URL: https://github.com/aweary/gradient-animation.scss
• Owner: aweary
• Created: 2014-11-29T20:58:53.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2015-04-23T18:55:19.000Z (over 9 years ago)
• Last Synced: 2024-10-27T09:51:28.012Z (2 months ago)
• Language: CSS
• Size: 156 KB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Summary

=======================

Sass mixin that lets anyone easily implement an animated background gradient. Currently this mixin requires Bourbon

but this is not a permanent dependency.

Usage

=======================

After you've included the SCSS file into your project you simply need to include it in the stylesheet for the element

you'd like to animate, like so

```@include animation-gradient($direction, $duration, ($colors...));```

The mixin takes three arguments:

`$direction:` This is the direction of the linear animation, e.g., 125deg.

`$duration:` The total animation time in seconds, e.g., 40s. I recommend 30s+ for a smooth gradient.

`$colors:` This is a list of colors you'd like to include in the animation. Pass the list inside parantheses. There is no hard set limit to the number of colors that can be set, but I'd recommend keeping it between 2 and 6.