CSS transition rules, transform overflow




Explanation

Not always the CSS rules work exactly as you want or implied. And often unusual problems that need to be done on CSS. This will be discussed in the article.

 

Transition

This property does not work with all CSS rules. The entire list of properties that you can modify using transition can be viewed at http://www.w3.org/TR/css3-transitions/#animatable-css. In the specification shown are defined as time-function, as well as what they are and more.

 

Transition No. 1

This is a very simple example, in which on mouse over is animation change the background of an element.

  1. #transition-1 {
  2. height: 50px;
  3. width: 100px;
  4. background-color: lightcoral;
  5. transition: 1s;
  6. }
  7. #transition-1:hover {
  8. background-color: lightgreen;
  9. }

Feature

I didn't have to specify what you want to animate, then animated all the possible changes.

Transition No. 2

In this example, the animation of the element on hover occurs 2 times faster than the withdrawal of the guidance. This is achieved by overriding the CSS rules for the pseudo-selector :hover.

  1. #transition-2 {
  2. height: 50px;
  3. width: 100px;
  4. background-color: lightcoral;
  5. transition: 2s;
  6. }
  7. #transition-2:hover {
  8. background-color: lightgreen;
  9. transition: 1s;
  10. }

 

Transition No. 3

In this example, changing background-color, and border-width. While they have different animation speeds, and different delays.

  1. #transition-3 {
  2. height: 50px;
  3. width: 100px;
  4. background-color: lightcoral;
  5. border: 0 solid black;
  6. box-sizing: border-box;
  7. transition: background-color 2s,
  8. border-width .2s ease 1.8s;
  9. }
  10. #transition-3:hover {
  11. border-width: 4px;
  12. background-color: lightgreen;
  13. transition: background-color 2s,
  14. border-width .2s;
  15. }

 

Transform

Additional properties transfrom, such as backface-visibility, perspective, perspective-origin, transform, transform-origin, transform-style, different attitudes to the specified parameters, for example, not all support the job of size in %. The full list can be viewed at http://www.w3.org/TR/2012/WD-css3-transforms-20120403/#property-index.

 

Transform Transition No. 1

In the example, animate the transform. Also, when using the pseudo-selector :hover specify other parameters for the transition.

  1. #transform-1 {
  2. height: 50px;
  3. width: 100px;
  4. background-color: lightcoral;
  5. transform: rotate(-20deg);
  6. transition: transform 1s ease 1s;
  7. }
  8. #transform-1:hover {
  9. transform: rotate(20deg);
  10. transition: transform .5s;
  11. }

 

Overflow

Properties such as max-lines, overflow, overflow-x, overflow-y, different attitudes to the specified parameters. See examples below. The full list can be viewed at http://www.w3.org/TR/css-overflow-3/#property-index.

 

Overflow No. 1, Overflow No. 2, Overflow, No. 3

In examples 1 and 2, I'm one of the properties made visible, and the second hidden. However, visible automatically changed to auto. And this is normal behavior when you set one side of the property is hidden (it is written in the spec, see link above). But when you set both sides as hidden, everything works fine (see example 3).

  1. #overflow-1 {
  2. height: 50px;
  3. width: 50px;
  4. border: 1px solid lightcoral;
  5. overflow-x: visible;
  6. overflow-y: hidden;
  7. }
  8.  
  9. #overflow-2 {
  10. height: 50px;
  11. width: 50px;
  12. border: 1px solid lightcoral;
  13. overflow-x: hidden;
  14. overflow-y: visible;
  15. }
  16.  
  17. #overflow-3-outside {
  18. height: 50px;
  19. width: 100px;
  20. border: 1px solid lightcoral;
  21. overflow: hidden;
  22. }
  23. #overflow-3-inside {
  24. height: 100px;
  25. width: 50px;
  26. border: 1px solid black;
  27. overflow: hidden;
  28. }

How do I use it? The answer in example 4.

 

Overflow No. 4

In this example, each of the parent element sets the fillet for their heirs, hiding everything beyond the element (overflow: hidden;). For clarity, I added a border all the examples overflow. To make the same fillet with one parent unit.

  1. #overflow-4-outside {
  2. height: 100px;
  3. width: 100px;
  4. border: 1px solid lightcoral;
  5. border-radius: 80px / 20px;
  6. overflow: hidden;
  7. }
  8. #overflow-4-inside {
  9. height: 100%;
  10. width: 100%;
  11. border: 1px solid black;
  12. box-sizing: border-box;
  13. border-radius: 20px / 80px;
  14. overflow: hidden;
  15. }
  16. #overflow-4-square {
  17. height: 100%;
  18. width: 100%;
  19. background-color: burlywood;
  20. }

Live demo
Download ZIP







Found comments - 0






Current text is converted to a smiley
:) :( :0 :@ :# :$ :? :] :[ :} :{ :k :p :x :| :Q :O :S :D :X :C :-) :-( :-0 :-# :-$ :-? :-] :-[ :-} :-{ :-o :-p :-x :-| :-Q :-O :-S :-D :-X :-C :-* :-r :-t :-i :-s :-j :-k :-l :-z :-\ :-/ :-I :-J :-K :-L :-Z ;) ;] ;} ;-) ;-] ;-} =) =( =0 =@ =# =$ =? =] =[ =} ={ =o =p =x =| =Q =O =S =D =X =C
:)

Designer avatar

Gender
Hairs/Hats Mouth
Eyes Glasses
Result