html5 – 转换属性CSS3规模,但坚持在底部

前端之家收集整理的这篇文章主要介绍了html5 – 转换属性CSS3规模,但坚持在底部前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有人知道如何缩放图像但坚持底部
下面是我的代码,我的图像在中间缩放,但我需要它们粘在底部.
  1. .animation_scale{
  2. position:absolute;
  3. top:150px;
  4. left:55px;
  5. display:block;
  6. z-index:-10;
  7. bottom : 0;}
  8.  
  9. .animation_scale img{
  10. animation-name:animation_scale;
  11. animation-duration:1s;
  12. animation-timing-function:ease;
  13. animation-delay:0s;
  14. animation-iteration-count:1;
  15. animation-direction:alternate;
  16. animation-play-state:running;
  17. animation-fill-mode: forwards;
  18.  
  19. /* Firefox: */
  20. -moz-animation-name:animation_scale;
  21. -moz-animation-duration:1s;
  22. -moz-animation-timing-function:ease;
  23. -moz-animation-delay:0s;
  24. -moz-animation-iteration-count:1;
  25. -moz-animation-direction:alternate;
  26. -moz-animation-play-state:running;
  27. -moz-animation-fill-mode: forwards;
  28.  
  29. /* Safari and Chrome: */
  30. -webkit-animation-name:animation_scale;
  31. -webkit-animation-duration:1s;
  32. -webkit-animation-timing-function:ease;
  33. -webkit-animation-delay:0s;
  34. -webkit-animation-iteration-count:1;
  35. -webkit-animation-direction:alternate;
  36. -webkit-animation-play-state:running;
  37. -webkit-animation-fill-mode: forwards;}
  38.  
  39. @keyframes animation_scale {
  40. 0% {
  41. -webkit-transform: scale(0.2) translate(0px);
  42. -moz-transform: scale(0.2) translate(0px);
  43. -o-transform: scale(0.2) translate(0px);}
  44.  
  45. 100% {
  46. -webkit-transform: scale(1.0) skew(0deg) translateY(-10px);
  47. -moz-transform: scale(1.0) skew(0deg) translateY(-10px);
  48. -o-transform: scale(1.0) skew(0deg) translateY(-10px);}}
  49.  
  50. @-moz-keyframes animation_scale /* Firefox */
  51. {0% {
  52. -moz-transform: scale(0.2) translate(0px);}
  53.  
  54. 100% {
  55. -moz-transform: scale(1.0) translateY(-10px);}}
  56.  
  57. @-webkit-keyframes animation_scale{ /* Safari and Chrome */
  58.  
  59. 0% {
  60. -webkit-transform: scale(0.2) translate(0px);}
  61.  
  62. 100% {
  63. -webkit-transform: scale(1.0) translateY(-10px);}}

解决方法

使用变换原点中心底部

这是工作DEMO

猜你在找的HTML5相关文章