Home > Developer > Web Develop
CSS transitions: the effect that elements gradually change from one style to another.
Conditions required for Transition: 1. The transition element must have a CSS style. 2. There must be a transition time.
The following are the properties of the transition element:
Transition: Shorthand property for setting four transition properties in one property.
Transition-property: Specifies the name of the CSS property that the transition is applied to.
Transition-duration: Time spent in transition.
Transition-timing-function: The temporal curve of the transition element, the value of which has linear (uniform process), ease (gradual slowing process), ease-in (Accelerated process), ease-out (deceleration process), Cubic-bezier (0,0,0,0) Bezier curve
Transition-delay: Specify a transition start time (that is, how long it will take to start), default is 0
Transition effects We generally use the mouse to slide over or click, I here with the mouse over as an example:
1. Slide the mouse over the width into the original 120%
2. Slide the mouse over plus shadow
3. The mouse is out of date to achieve translation, rotation, zooming, twisting and other effects.
Transform (2D conversion)
Attribute values are: translate (pan), rotate (rotation), scale (scaling), skew (warp)
HTML section
<body><div id= "box" ></div></body>
CSS section:
#box {height:200px;width:200px;border:1px solid #000;/*1. The mouse-over width changes to the original 120%*/transition-property:width;/* The property name to transition */ transition-duration:1s;/* transition Time */transition-timing-function:linear;/* transition time curve */transition-delay:0;/* transition start time *//* 2. Mouse slide over plus shadow */transition-property:box-shadow; /* The attribute name to be transitioned */transition-duration:1s;/* the transition time */transition-timing-function:linear;/* the time curve of the transition */transition-delay:0;/ * The start time of the transition *//* above is more troublesome, so you can write: */transition:all 1s linear 0s; /* Generally replaces all attribute names to be transitioned with all */-ms-transition:all 1s linear 0s;/* compatible ie10+*/-moz-transform:all 1s linear 0s;/* compatible Firefox */-o-tra Nsition:all 1s linear 0s;/* compatible opera */-webkit-transform:all 1s linear 0s;/* compatible with Safari and Chrome */;} /*transform (2D conversion) attribute values are: translate (pan), rotate (rotation), scale (scaling), skew (WARP) */#box: hover{width:120%;box-shadow:0px 0px 5px Orange /*3. Mouse-out-of-date for panning, rotating, zooming, twisting, and so on *//*1. Pan */transform:translate (50px,50px); /*translate () If a value represents the distance that the x-axis needs to be translated, the two values represent the distance */-webkit-transform:translate (50px,50px) that the x and Y axes need to be translated;/* compatible with Safari and Chrome */; -ms-transform:tRanslate (50px,50px);/* Compatible with ie10+*/-moz-transform:translate (50px,50px);/* Compatible with Firefox */-o-transform:translate (50px, 50px);/* Compatible opera *//* only allows the x-axis to translate */transform:translatex (50px); -webkit-transform:translatex (50px);/* compatible with Safari and Chrome */;-ms-transform:translatex (50px);/* Compatible ie10+*/- Moz-transform:translatex (50px);/* Compatible with Firefox */-o-transform:translatex (50px);/* Compatible with opera *//* only let the y-axis translate */transform: Translatey (50px);-webkit-transform:translatey (50px);/* compatible with Safari and Chrome */;-ms-transform:translatey (50px);/* Compatible with Ie10+*/-moz-transform:translatey (50px);/* Compatible with Firefox */-o-transform:translatey (50px);/* Compatible with opera *//*2. Rotation *//* compatibility with Pan */transform:rotate (45DEG); /* Positive value indicates clockwise rotation, negative value indicates counterclockwise rotation *//* Only let X axis rotate */Transform:rotatex (45DEG); /* Only let the y axis rotate, the equivalent 13 D rotation */Transform:rotatey (45DEG); /*3. Scaling *//* compatibility with Pan */transform:scale (0,0.2); /* Two values, the first one for horizontal scaling, and the second for vertical scaling *//*4. Twist *//* compatibility with Pan */transform:skew (30deg, 30deg); /* The first parameter represents the horizontal tilt angle, and the second parameter represents the tilt angle in the vertical direction. */}
2. css-Transition
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
