CSS Transition Generator

Description of each CSS property

transition

The transition property is an animation that can be specified with CSS. It allows animation between two points (a start point and an end point). There is no autoplay or looping functionality.

The following transitions can be specified.

• transition-property: Specification of properties to which transition is applied. The default value is all and all properties
• transition-duration: The time between the beginning and the end of the animation. Initial value is 0s.
• transition-timing-function: Speed change of transition. The initial value is "ease", and the first and the last are a little slower.
• transition-delay: Time before animation begins. Initial value is 0s.

In addition, transition can be specified as a short-hand property and can be described as follows
Example description) transition: 1s ease-out transform .2s
Basically, in no particular order, if two time specifications are written (1s and .2s in the example), the first one is transition-duration and the second one is transition-delay.

The firing of transition (the timing at which animation begins) is often done by using the hover pseudo-class, or by reassigning classes by JS, etc.

transform

The transform property allows an element to be transformed.
There are four main values for transform that can be specified.

• translate
• rotate
• scale
• skew

Although they can be specified individually, if they are specified in combination, separate them with a space.
Example description) transform: scale(1.1) skew(10deg);
The default value is none.
If multiple elements are specified, they are applied to the elements in the order in which they are specified.

Values other than skew can be specified in the X, Y, and Z axis directions (3D). skew can only be specified in the X and Y axis directions.
For example, to specify only the X axis for translate, the following can be specified.
Example description) transform: translateX(10px);

Each designation can also be specified as follows
translate

• translate(X-axis travel distance, Y-axis travel distance)
• translateX(X-axis travel distance)
• translateY(Y-axis travel distance)
• translateZ(Z-axis travel distance)
• translate3d(X-axis travel distance, Y-axis travel distance, Z-axis travel distance)

scale

• scale(Scale ratio in X-axis direction, Scale ratio in Y-axis direction)
• scaleX(Scale ratio in X-axis direction)
• scaleY(Scale ratio in Y-axis direction)
• scaleZ(Scale ratio in Z-axis direction)
• scale3d(Scale ratio in X-axis direction, Scale ratio in Y-axis direction, Scale ratio in Z-axis direction)

rotate

• rotate(Angle of rotation)
• rotate3d(Rotation angle about the X axis, Rotation angle about the Y axis, Rotation angle about the Z axis, Angle of rotation)
• rotateX(Rotation angle about the X axis)
• rotateY(Rotation angle about the Y axis)
• rotateZ(Rotation angle about Z-axis)

skew

• skew(Inclination angle of X axis, Inclination angle of Y axis)
• skewX(Inclination angle of X axis)
• skewY(Inclination angle of Y axis)

transform3d

3D expressions in CSS can be achieved by using the "translate," "rotate," and "scale" transform properties.

In particular, the "translateZ", "rotateX", "rotateY", and "scaleZ" can be specified to represent the 3D direction.

However, using the transform property alone does not give the impression of a 3D representation of 2D.
Therefore, it is necessary to specify "transform-style: preserve-3d;" on the parent element to which transform is specified. (default value is flat).

In addition, by specifying "perspective," you can specify a perspective effect.
Example description) perspective: 1000px;

The vanishing point can also be changed by specifying "perspective-origin". The default values are 50% 50% (X and Y axes, respectively).

border

The border property allows you to set a border (element boundary) on an element.

Each value (value) can be specified as follows
border: border widthborder typeborder color
Example description) border: 1px solid #333
Incidentally, the order of the values does not matter; the initial value of border is none.

Each value can also be specified individually, for example

• border-width
• border-style
• border-color

properties.
Example description) border-width: 10px;
Example description) border-style: solid;

Each of these can also be oriented.
Example of border-width

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

Example of border-style

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

Example of border-color

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

In addition to solid, the following values can be specified for border-style.

• double. Two straight lines (double lines) are displayed and the total width is the px size specified in border-width.
• groove. It is displayed as a three-dimensional depressed line.It is the reverse of ridge.
• ridge.It appears as a three-dimensional raised line, the opposite of groove.
• inset. The top and left lines will appear darker, the bottom and right lines will appear lighter, and the entire image will appear as if it is three-dimensionally depressed. This is the opposite of outset.
• outset. The top and left lines will appear lighter, while the bottom and right lines will appear darker, giving the appearance of three-dimensional ridges. The opposite is true of inset.
• dashed. Displays a dashed line. Displays a series of dashes or line segments with short, square corners.
• dotted. It is displayed as a dotted line. Specifically, it displays a series of round dots. The radius of the dots is half of the calculated border-width of the same edge.

Note, however, that dotted, dashed, etc. may be rendered differently in different browsers.

You can also define the direction in which the border is to be specified.

• border-top
• border-bottom
• border-right
• border-left

Example description) border-left: 10px solid #333;

box-shadow

The box-shadow property allows you to set a shadow on an element.

Each value can be specified as follows
box-shadow: Shadow inward(inset)amount of horizontal displacementamount of vertical displacementamount of shadow blurringshadow sizeshadow color

• Negative values foramount of horizontal displacementamount of vertical displacementwill place them vertically above and horizontally to the left, respectively.
• A positive value forshadow sizemakes it larger, while a negative value makes it smaller.

Example description) box-shadow: inset 2px 2px 3px 4px #000;

If inset is not required, the description is also unnecessary.

• If only two values are specified, they are set asamount of horizontal displacementamount of vertical displacement
• If only three values are specified, an additional third value is set asamount of shadow blurring
• If only four values are specified, an additional fourth value is set asshadow size

The initial values foramount of horizontal displacementamount of vertical displacementamount of shadow blurringshadow sizeare 0 for each.
The initial value forshadow coloris currentColor (the value set for color).

If border-radius is specified, the shadow will also reflect that rounding.

If border-radius is specified, the shadow will also reflect that rounding.
To specify multiple shadows, separate them with a comma ",". The first shadow specified will be in the foreground.
Example description) box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, .5), 0px 0px 3px #ff0;

Use text-shadow to add shadows to text.

text-shadow

The text-shadow property allows you to set a shadow on a character (text).

Each value (value) can be specified as follows.
text-shadow: horizontal displacementvertical displacementshadow blur amountshadow color
Example description) text-shadow: 2px 2px 3px rgba(0, 0, 0, .5)

Negative values forhorizontal displacementvertical displacementwill place it vertically above and horizontally to the left, respectively.
The initial values forhorizontal displacementvertical displacementshadow blur amountamount are 0 for each.
Ifshadow coloris not specified, the color selected by the user agent will be used. Therefore, it must be explicitly defined for cross-browser compatibility.

Multiple shadows can be specified.
To specify multiple shadows, separate them with a comma ",". The first shadow specified will be in the foreground.
Example description) text-shadow: 2px 2px 3px rgba(0, 0, 0, .5), 0px 0px 3px #ff0;

hover

hover allows the user to specify the behavior of the cursor (mouse pointer) when it hovers (passes over) an element.
Example description)
.test:hover {
color: red;
}

If you want to animate the animation, specify the transition property to the selector before the animation, so that the animation will occur when hovering and when the hover is released.
Example description)
.test {
transition: .3s;
}
.test:hover {
color: red;
}

Note that on devices such as smartphones, hover takes the form of firing at the moment of a tap, which appears to be buggy.
They often consider utilizing media queries and user agents.

filter

filter allows you to apply an effect (graphic effect) to an image or element. The following values can be specified

• blur
• brightness
• contrast
• grayscale
• hue-rotate
• invert
• opacity
• saturate
• sepia
• drop-shadow

You can also refer to the SVG filter by a URL to the SVG filter element.

Multiple filters can be specified, and if more than one is specified, they are separated by a single-byte space.
If multiple filters are specified, they are applied in the order in which they are specified.
Example description) filter: blur(3px) saturate(120%);
The default value is none.
You can also apply the same thing twice. For example, filter: blur(3px) blur(5px).
It can also be animated with CSS by combining it with hover, etc.

Details of each item are as follows

• blur: Blurs the element. The unit cannot be %. Gaussian Blur (Gaussian Blur, Gaussian Blur, Gaussian Filter, Gaussian Filter) is used for the value. The specified value defines how many pixels on the screen will blend into each other.
• brightness: Adjusts the brightness of the element. Can be lightened or darkened; a value of 100% (or 1) will leave the input unchanged; a value of 0% will result in a completely black image; a value greater than 100% can also be specified; a value of 0 will result in a black image.
• contrast: Adjusts the contrast of an element: a value of 0% produces a completely gray element; a value of 100% produces no change; a value greater than 100% produces a display with a higher contrast ratio.
• grayscale: Makes the element grayscale (monochrome); 100% makes it completely grayscale; 0% makes no change.
• hue-rotate: Rotates the hue of the element; 0deg will result in no change; values greater than 360deg will result in a wrap around (420deg will result in 60deg).
  *Hue is one of the three attributes of color (hue, lightness, and saturation), which characterize colors such as red, orange, yellow, green, blue, sky blue, and purple.
• invert: Inverts the color of the element; at 0% there is no change; at 100% it is completely inverted.
• opacity: Specifies the transparency of the element; a value of 0% makes it completely transparent; 100% makes no change; the result is the same as the CSS opacity property, except that some browsers provide hardware acceleration to improve performance.
• saturate: Changes the saturation of the element; at 100% there is no change; values closer to 0% decrease saturation and values above 100% increase saturation; a value of 0% results in achromatic color.
• sepia: Makes the element sepia-toned; 0% makes no change; 100% makes it completely sepia-toned.
• drop-shadow: Specifies a shadow for the element, similar to box-shadow, but inset cannot be specified. It then generates a shadow along the form of the element. For a PNG image with a transparent background, a shadow is generated along the non-transparent areas. Multiple shadows can be specified. Specifically, an alpha mask of the input image in a specific color, staggered and blurred, is composited under the image. Some browsers display with hardware acceleration to improve performance.
  A total of four values can be specified, such as drop-shadow(horizontal displacementvertical displacementshadow blur amountshadow color)
  Example description) filter: drop-shadow(5px 4px 3px #555);

position

The position property sets how the element is positioned.
The top, right, bottom, and left properties determine the position of the placed element if a value other than static (the default value) is specified.
For non-static values, the z-index (order of overlap) can be specified. z-index defaults to auto. A numerical value can be specified, and the higher the value, the higher the element will be displayed as the upper layer (the layer in front).

The position property can be set to the following values

• relative：The position of the element itself does not change even if it is specified, but unlike static (default value), it is affected if top, etc., is specified.
• absolute：If an ancestor element is specified other than static, it is placed with respect to the nearest specified ancestor element.
• fixed：The elements are positioned relative to the screen.
  The position does not change when scrolling.
• sticky：Like fixed, it fixes the position when scrolled, but it cannot leave the scope of the parent element.

Example description) position: relative;