css3中translate、transform和translation,以及动画animation

example:

元素整体居中:

.box{

    position:absolute;

    top:50%;

    left:50%;

    width:50px;

    height:50px;

    transform:translate(-50%,-50%);

    background:gray;

}

1.translate:移动,是transform的一个方法

   通过translate()方法,元素从其当前位置移动,根据给定的left(x坐标)和top(y坐标)位置参数:

用法transform: translate(50px, 100px);
-ms-transform: translate(50px,100px);
-webkit-transform: translate(50px,100px);
-o-transform: translate(50px,100px);
-moz-transform: translate(50px,100px);
 
2. transform:变形,改变
css3中主要包括:
在css3中transform主要包括以下几种: 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
旋转:rotate() 顺时针旋转给定的角度,允许负值rotate(30deg)
扭曲:skew()元素翻转给定的角度,根据给定的水平线(x轴)和垂直线(Y轴)参数:skew(30deg,20deg)
缩放:scale()放大或缩小,根据给定的宽度(X轴)和高度(Y轴)参数:scale(2,4)
移动:translate()平移,传进x,,y值,代表沿x轴和y轴平移的距离
所有的2D转换方法组合在一起: matrix()旋转、缩放移动以及倾斜元素
matrix(scale.x,scale.y,translate.x,translate.y)
改变起点位置 transform-origin: bottom left;
 
transform: rotate旋转|scale缩放|skew扭曲|translate移动|matrix矩阵变形;
综合起来使用:transform: 30deg 1.5 30deg 20deg 100px 200px;//需要有空格隔开
 
3. transition: 允许css属性值在一定的时间区间内平滑的过渡。(过渡动画)
 
transition作用是指定了某一个属性(如width、left、transform等)在两个值之间如何过渡。
 
如果某一个元素指定了Transition,那么当其某个属性改变的时候就会按照Transition指定的方式进行过渡,动画就这么产生了。
 

transition主要包含四个属性值:
(1)  执行变换的属性:transition-property;
(2)  变换延续的时间:transition-duration;
(3)  在延续时间段,变换的速率变化:transition-timing-function  //例:平缓进入、先快后慢;
(4)  变换延迟时间: transition-delay
需要事件的触发,例如单击、获取焦点、失去焦点等。
语法:transition: property  duration  timing-function  delay;
例如:transition: width  2s  ease  0s;
 
4.Animation
 
Animation也是通过指定某一个属性(如width、left、transform等)在两个值之间如何过渡来实现动画的。
CSS3动画:
定义动画:
    @keyframes 自定义动画名称 {
         from{}
         to{}
     }
     
 @keyframes 自定义动画名称 {
         0%{}
         100%{}
 }
调用动画
    

调用动画
animation: 动画名称 动画时间 动画速度 动画延迟 动画次数 动画方向 动画播放状态 动画完成时的状态
动画名称: animation-name
动画时间 animation-duration
动画速度 animation-timing-function: linear(匀速变化) ease(低俗开始,然后加快,快结束的时候再放慢) ease-in(低速开始) ease-out(低速结束) ease-in-out(低俗开始,低速结束) steps()
动画延迟 animation-delay
动画次数 animation-iteration-count: infinite
动画方向 animation-direction:
动画播放状态: animation-play-state: running pause
动画完成时的状态: animation-fill-mode:forwards backwards

例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .box {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
            animation: move 5s linear infinite;
       }
       @keyframes move {
           0%{
               left: 100px;
           }
           50%{
               left: 150px;
           }
           100%{
               left: 200px;
           }
       }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

 

 
与Transition不同的是:
1.Animation可以通过keyframe显示控制当前帧的属性值,而Transition只能隐式来进行(不能指定每帧的属性值),所以相对而言Animation的功能更加灵活。
2. Animation通过模拟属性值改变来实现动画,动画结束之后元素的属性没有变化;而Transiton确实改变了元素的属性值,动画结束之后元素的属性发生了变化;这一点,这在实际应用中会产生很大的区别。
 
 

 

转载于:https://www.cnblogs.com/zhaosijia----1234/p/9389455.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3的变形(transform)、过渡(transition)、动画(animation)是CSS3非常重要的特性,可以为网页设计带来更加丰富的交互效果和视觉体验。 1. 变形(transform) 变形是指通过CSS3transform属性对元素进行平移、旋转、缩放、倾斜等操作,从而改变元素的形状和位置。具体的变形方式包括: 平移(translate):移动元素的位置。 旋转(rotate):以元素心点为轴心进行旋转。 缩放(scale):缩放元素的大小。 倾斜(skew):倾斜元素。 矩阵变形(matrix):通过矩阵变换实现复杂的变形效果。 示例代码: ``` div { transform: translate(50px, 50px); } ``` 2. 过渡(transition) 过渡是指在元素属性改变时,通过CSS3的transition属性设置过渡时间和过渡效果,从而实现平滑的转换效果。具体的过渡方式包括: 过渡时间(transition-duration):设置过渡动画的时间,单位可以是秒(s)或毫秒(ms)。 过渡效果(transition-timing-function):设置过渡效果,常用的有linear、ease-in、ease-out、ease-in-out等。 过渡属性(transition-property):设置需要过渡的属性,可以是单个属性或多个属性。 过渡延迟(transition-delay):设置过渡动画的延迟时间。 示例代码: ``` div { transition: all 1s ease-in-out; } ``` 3. 动画(animation) 动画是指通过CSS3animation属性对元素进行动画效果的设置。具体的动画方式包括: 关键帧动画(@keyframes):定义一组动画序列,可以设置元素在不同时间点上的样式。 动画时间(animation-duration):设置动画持续时间,单位可以是秒(s)或毫秒(ms)。 动画速度(animation-timing-function):设置动画速度,常用的有linear、ease-in、ease-out、ease-in-out等。 动画延迟(animation-delay):设置动画延迟时间。 动画方向(animation-direction):设置动画播放方向,可以是正方向(normal)、反方向(reverse)、交替播放(alternate)等。 动画次数(animation-iteration-count):设置动画播放次数,可以是无限次(infinite)。 示例代码: ``` div { animation: myanimation 2s ease-in-out infinite; } @keyframes myanimation { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } ``` 以上就是CSS3变形、过渡、动画的基本介绍和示例代码,希望对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值