2. css-Transition

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.