Animation feature added to coogger.css framework
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
@hakancelik, No matter approved or not, I upvote and support you.
I see, thank you very much for that
See my post and vote my last 3 post and I will upvote you 100% in one hour.... No reply
Congratulations, you were selected for a random upvote! Follow @resteemy and upvote this post to increase your chance of being upvoted again!
Read more about @resteemy here.
Thank you for the contribution. It has been approved. From next time try to refrain your post from informal sentences.
You can contact us on Discord.
[utopian-moderator]
okey thanks
You've got upvoted by
Utopian-1UP!You can give up to ten 1UP's to Utopian posts every day after they are accepted by a Utopian moderator and before they are upvoted by the official @utopian-io account. Install the @steem-plus browser extension to use 1UP. By following the 1UP-trail using SteemAuto you support great Utopian authors and earn high curation rewards at the same time.
1UP is neither organized nor endorsed by Utopian.io!
Hey @hakancelik I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x