creating CSS3 animations

Introduction
In the last posts we have shown how to create some animation using CSS3 transitions (to make buttons that animate moving object or to create an animated slider). Transitions are triggered in Javascript by a timer or by some action handler (eg. "onclick") that apply some change (change left or change CSS class) and the change will be animated.

In this post we will show how to create animations, just animations! For example one might need to animate an bouncing arrow next to some button or pulse current tab in menu.

How To ?
First you create a CSS selector (eg. a class called "bounce" or "animate_me"), then we need to pick a name for your animation let's say "bounce" 

.bounce { 
animation-name: bounce;
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-ms-animation-name: bounce;
-o-animation-name: bounce;
}

and then specify all animation factors you want like
  • animation-duration in seconds
  • iteration-count: 1 or 2 or infinite
  • animation-direction: normal or alternate (from start to end then from end to start)
  • animation-timing-function: eg. linear, eaze, eaze-in-out, cubic-bezier(A,B,C,D)
Note: All above are prefixed with browser specific prefix like "-moz" or "-webkit" ..etc
Here is some full example
.bounce { 
 -webkit-animation-name: bounce;
 -moz-animation-name: bounce;
 -webkit-animation-duration: 0.5s;
 -moz-animation-duration: 0.5s;
 -webkit-animation-iteration-count: infinite;
 -moz-animation-iteration-count: infinite;
 -webkit-animation-direction: alternate;
 -moz-animation-direction: alternate;
 -webkit-animation-timing-function: eaze-in-out;
 -moz-animation-timing-function: eaze-in-out;
}

Now all you have to do is to specify what is the start of the animation and what is the end for the animation name you declared in the previous section like this
 @-webkit-keyframes bounce {
  from { left: 0px; }
  to { left: 100px; }
 }

You might as well specify every single step in the animation using % instead of from/to like this:


@-moz-keyframes round {
 0% { left:0; top:0;background:red;}
 25% { left:100px; top:0;background:yellow;}
 50% { left:100px; top:100px;background:green;}
 75% { left:0; top:100px;background:blue;}
 100% { left:0; top:0;background:red;}
}
@-webkit-keyframes round {
 0% { left:0; top:0;background:red;}
 25% { left:100px; top:0;background:yellow;}
 50% { left:100px; top:100px;background:green;}
 75% { left:0; top:100px;background:blue;}
 100% { left:0; top:0;background:red;}
}
Live Examples:
Here are 3 live examples
the last one gives something like this


Comments

Post a Comment

Popular posts from this blog

How to defuse XZ Backdoor (or alike) in SSH Daemon

XZ Backdoor in SSH Background Someone planted a backdoor in XZ compression, which is believed to affect SSH. More details can be found. Although it was never shipped to production version of any distro. Even if you are using unaffected version I suggest you defuse any similar backdoors. https://www.openwall.com/lists/oss-security/2024/03/29/4 https://news.ycombinator.com/item?id=39865810 https://gist.github.com/thesamesam/223949d5a074ebc3dce9ee78baad9e27 https://www.redhat.com/en/blog/urgent-security-alert-fedora-41-and-rawhide-users The Kill Switch The backdoor has a kill switch, it does not activate if it detects that someone is observing it (debugger attached...etc). An easy way to defuse the backdoor is to just define TERM environment variable causing the backdoor to think it's being observed and it would disable itself hopefully this is not specific to this backdoor but any similar one.  mkdir /etc/systemd/system/sshd.service.d/ echo -e "[Service]\nEnvironment=TERM=xt...
Read more

Making minimal graphical operating system

Image
Back in my first days of Linux I had a bootable floppy disk with fully functional Linux distro (a kernel, a shell and busybox tools and lua scripting). Maybe that was not much, but it was less than 2MB and would work on an old 386 PC with 4MB of RAM. But shell is boring, graphical minimal Linux distros was several hundreds of mega bytes and need hundreds of MB of RAM. Embedded devices typically have a minimal Linux with busybox or alike running with no graphical interface but instead they have some sort of web interface exposed to some port. If you tried to run a minimal graphical Linux distro let's say XFCE on an embedded device (let's say a raspberry pi) you would notice that most of its limited resources are taken by Xorg the legacy graphical server. Introducing Wayland Wayland is a new different approach to graphical interface, instead of sending drawing instruction over a legacy protocol (with so many extensions) to a legacy daemon (with so many extensions) that ...
Read more

Bootstrapping Alpine Linux QCow2 image

Introduction Alpine Linux is a minimal distro with package manager ( APK ) that is based on busybox and musl library . Like the  CirrOS , it's very lightweight, but unlike it, it's full featured. In case you don't know me, my Linux distro of choice is Fedora/CentOS, in this post I'm going to bootstrap a QCow2 cloud image of Alpine Linux on my distro of choice. Using docker to bootstrap a working chroot Type mkdir alpine35-root docker run --rm -ti -v $PWD/alpine35-root:/data alpine:3.5 apk --arch x86_64 -X http://nl.alpinelinux.org/alpine/v3.5/main/ -U --allow-untrusted --root /data --initdb add alpine-base  and you should get a line like this OK: 6 MiB in 16 packages so now we have a working alpine chroot in the directory alpine35-root Creating Bootable QCoW2 Image Because I don't want to format my hard disk by mistake and because I know Murphy's law, I'll take those 6MB as tarball and continue on a VM. dd if=/d...
Read more