transform: alters the object's position, methods can be chained as so: transform: translate(10, 10) scale(3, 3)
transform: translate(2 arguments, X and Y axis) - moves object around the screen
translateX(1 argument) & translateY(1 argument) - moves object around the screen using 1 specified axis
transform: scale(2 arguments) - scales the image in given directions, accepts X and Y axis
scaleX(1 argument) & scaleY(1 argument) - scales the image in a given axis
transform: rotate(2 arguments, X and Y axis) - rotates an image as if it was a 3D model. use deg measurements as an argument - short for degree
rotateX(1 argument) & rotateY(1 argument) - rotates an element in a given axis, if turned at 90deg - the object will become invisible if it's not a 3D model
rotateZ(1 argument) - rotates an object around a Z axis - use positive int for clockwise rotation, negative int for anti-clockwise rotation
transition: - defines the object's behaviour during transition between states.
- transition can take both values and properties as an argument and it will then execute them in orderly manner as such: transition: background 1s, transform 2s, 3s, linear - where background change transition will happen in 1 second, object's transform properties will take 2 seconds to apply, everything else will take 3 seconds, and every action will be transitioned in a linear way, meaning that the transition effect will not be sped up/slowed down, etc.
@keyframe name{} - defines namespace for the animation. Allows to store animation properties within the same namespace, can be called by other classes as so: animation-name: name;, can also be altered as such: animation duration: 3s.
an animation can utilise two forms of conditioning.
1st - from {} and to {} conditions, which define start of the animation and the animation's end.
2nd - percentages 0% {} 50% {} 100% {}, which allow for much more accurate control over the animation. this type of conditioning accepts percentages between 1 and 100.
animation-fill-mode: - defines the element's behaviour outside of the animation runtime.
accepts 1 argument - backwards, forward, both.
-backwards - applies data from the from animation to the element before the animation starts.
-forward - applies data from the to animation to the element after the animation finishes.
- both applies both arguments to the element.animation-delay: - sets a delay between the point at which the webpage is loaded in and when the animation starts. accepts 1 argument in seconds.
animation-iteration-count: - defines the amount of times the animation will be repeated. accepts 1 argument, which is an integer or infinite. when the infinite is passed - the animation will continue infinitely
animation-direction: - defines an order in which the animation will hit the from and to animations.
- normal - normal behaviour, starts with from and transitions into to
- reverse - animation starts with to and transitions into from
- alternate - starts with from, then goes into to, then from to to from.
- reverse-alternate - same as alternate, but starts with to instead of from
animation shorthand allows the developer to combine all animation properties and methods under one keyword - animation:, as such: animation: name time transition-time repetition-iteration direction. example: animation: tick 10s linear infinite alternate.
In order to chain animations, the developer would have to use a comma after stating the first animation and its properties, as such: animation: tick 10s infinite, tack 5s infinite.