css3的动画

分类: 2d 动画 ,3d 动画, 2d转3d,过渡动画和帧动画

《一》2d转换:transfrom

转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。

属性 描述
translate() 平移(沿x,y,z轴方向平移 px)
rotate() 旋转(沿x,y,z轴方向平移 deg)
scale() 放大
skew (变形 deg)

translate():
根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
默认旋转x
translatex(100px):沿x轴向右平移100px。
transform:translatex(100px); transform:translatey(100px); transform:translatey(100px);
rotate():
在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
默认旋转z
rotatey(45deg):沿y轴顺时针旋转45度。

transform: rotatey(45deg);
transform: rotatex(45deg);
transform: rotatey(45deg);
  div
        {
            margin:50px auto;
            width:100px;
            height:100px;
            background-color: #ff4fe0;
            border:1px solid black;
        }
        .hi
        {
            transform: rotatex(45deg);
        }
    </style>
</head>
<body>

<div>i miss you </div>

<div class="hi">i miss you </div>

在这里插入图片描述
scale():
该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数
scale(1.5,2)转变宽度为原来的大小的1.5倍,高度为原来的2倍

transform: scale(1.5,2);

skew():
包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
skewX();表示只在X轴(水平方向)倾斜。
skewY();表示只在Y轴(垂直方向)倾斜。
skew(-45deg):X轴倾斜

 div
        {
            margin:50px auto;
            width:100px;
            height:100px;
            background-color: #ff4fe0;
            border:1px solid black;
        }
        .hi
        {
            transform:translatey(100px);
            /*-webkit-transform:skew(30deg,20deg); /!* Safari and Chrome *!/*/
        }
    </style>
</head>
<body>

<div>i miss you </div>

<div class="hi">i miss you </div>

</body>

在这里插入图片描述
css3的旋转中心:transform-origin
transform-origin: center;
在这里插入图片描述
transform-origin: top left;
在这里插入图片描述

transform-origin: 50px 50px;
在这里插入图片描述
transform-origin: bottom right 60px;
在这里插入图片描述
transform-origin属性可以使用一个,两个或三个值来指定,其中每个值都表示一个偏移量。

  • 一个值:
    必须是,,或 left, center, right, top, bottom关键字中的一个。
  • 两个值:
    其中一个必须是,,或left, center, right关键字中的一个。
    另一个必须是,,或top, center, bottom关键字中的一个。
  • 三个值:
    前两个值和只有两个值时的用法相同。
    第三个值必须是。它始终代表Z轴偏移量。
keyword value
left 0%
center 50%
right 100%
top 0%
bottom 100%

一个小案例 图片放大:

<style>
        .b{
            width: 400px;
            height: 500px;
            margin: auto;
            overflow: hidden;
        }
        .b>img{
            width: 300px;
            height: 200px;
            transition: all .5s linear;
        }
        .b:hover img{
            transform: scale(1.5);
        }

《二》过渡动画:transition

元素从一种样式逐渐改变为另一种的效果(属性的过渡)
规定两项内容:

  1. 指定要添加效果的CSS属性
  2. 指定效果的持续时间
属性 描述
transition-delay 动画的延迟时间
transition-duration 动画的执行时间
transition-timing-function 动画的执行方式
transition-property 过渡的属性

简写的 transition 属性
transition: width 1s linear 2s;(属性 执行时间 执行方式 延迟时间 )
transition-timing-function:动画的执行方式:
linear 匀速
ease-in 慢慢开始
ease-in-out 慢开始慢结束
transition-property :过渡的属性
如果要过渡多个属性,就分开写
all: 过渡所有属性

.b
        {
            margin:50px auto;
            width:100px;
            height:100px;
            background: #54ffcf;
            margin-left: 0;
            /*/!* transition-delay 动画的延迟*!/
                  transition-delay:1s;
                  /!*transition-duration 动画的执行时间*!/
                  transition-duration: 1s;
                  /!* transition-timing-function动画的执行方式  linear 匀速 ease-in  慢开   ease-in-out 慢开慢关*!/
                  transition-timing-function: linear;
                  /!* transition-property  过渡什么属性  margin-left  如果要过渡多个属性 分开  all 过渡所有属性*!/
                  transition-property:margin-left;*/
            transition: margin-left 1s 1s linear;
        }
        .b:hover{
            margin-left: 50px;
        }
    </style>
</head>
<body>
<div class="b">

版权声明:本文为fanfan_h原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/fanfan_h/article/details/89928754