Hello everyone,I am developing coogger.css which is css framework for coogger.com, you can use our project or you can contribute it.
Another content about coogger.css
Not: This feature was done with the help of animate.css
Bug Fixes
- There was more than one code performing the same task.
Acording to the codes ,
@mixin transform($string){
@include prefixed(transform, $string);
}
New Features
- All features added from animate.css.
- Animation repetitions had set 1, 2, 3, 4 and infinitely.
- Hover feature added to animations, so we can use hvr-animation and animation.
- Two different animations have been added from animate.css, these are rebound and blink.
Exaple ;
I have added some animations to coogger , if you want to check it out
How to use it in our project ?
- These codes add in
html <head>tags.
<head>
<link href="https://raw.githubusercontent.com/hakancelik96/coogger.css/master/styles/coogger.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
</head>
- and then
To use this features,just do coding like this. - to repeat the animation once
<div animation="blink"></dib>
or
<div hvr-animation="blink"></dib>
- to infinite repeat animation
<div hvr-animation="i blink"></dib>
or
<div animation="i blink"></dib>
- to repeat the animation 2 times
<div hvr-animation="c-2 blink"></dib>
or
<div animation="c-2 blink"></dib>
Available animation list
rebound | flash | pulse | rubberBand |
shake | headShake | swing | tada |
wobble | jello | bounceIn | bounceInDown |
bounceInLeft | bounceInRight | bounceInUp | bounceOut |
bounceOutDown | bounceOutLeft | bounceOutRight | bounceOutUp |
fadeIn | fadeInDown | fadeInDownBig | fadeInLeft |
fadeInLeftBig | fadeInRight | fadeInRightBig | fadeInUp |
fadeInUpBig | fadeOut | fadeOutDown | fadeOutDownBig |
fadeOutLeft | fadeOutLeftBig | fadeOutRight | fadeOutRightBig |
fadeOutUp | fadeOutUpBig | flipInX | flipInY |
flipOutX | flipOutY | lightSpeedIn | lightSpeedOut |
rotateIn | rotateInDownLeft | rotateInDownRight | rotateInUpLeft |
rotateInUpRight | rotateOut | rotateOutDownLeft | rotateOutDownRight |
rotateOutUpLeft | rotateOutUpRight | hinge | jackInTheBox |
rollIn | rollOut | zoomIn | zoomInDown |
zoomInLeft | zoomInRight | zoomInUp | zoomOut |
zoomOutDown | zoomOutLeft | zoomOutRight | zoomOutUp |
slideInDown | slideInLeft | slideInRight | slideInUp |
slideOutDown | slideOutLeft | slideOutRight | slideOutUp |
blink |
How did I implement them ?
Roadmap
I think more animations can be added to it and according to screen sizes events can be added, for example the screen sizes can be xs, s, m, l, xl and xxl, but at the moment I do not know how to add this,
If you have an idea, please do not hesitate to let me know.
How to contribute?
- You can add new animations.
- As I said you can take steps on the screen event feature xs,s,m,l,xl and xxl.
- You can add new features on GitHub with pr.
- You can open new issue on GitHub any mistake, error or bug.
- You can give me a new idea.
- or you can just use it and feedback .
contact me
Posted on Utopian.io - Rewarding Open Source Contributors