ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS 动画介绍

2021-07-31 20:05:23  阅读:170  来源: 互联网

标签:动画 transition 100px transform 介绍 width animation div CSS


过渡transition

transition: property duration timing-function delay; 过渡效果属性,运行时间,运行速度,何时开始

默认执行时间是0

transition:1s 如果只填写时间则默认全部all

过渡属性transition-property

  • 单个或多个属性,多个用逗号隔开

  • none 没有属性过渡效果

  • all 所有 耗性能

过渡时间 transition-duration

  • 默认0 没有过渡效果

  • 单位s或ms

执行曲线 transition-timing-function

  • 默认ease 开始慢-中间快-结束慢

  • linear匀速

  • ease-in 开始慢-结束快

  • ease-out 开始快-结束慢

div {
 width: 100px;
 height: 100px;
 background: blue;
 transition: width 2s;
}
 div:hover {
  width: 300px;
}

2D变化transform

translate

  • 一个参数 代表x轴 y默认0

  • 两个参数 第一个x 第二个y 正数x 向右 正数y向下

  • 偏移量参考左上角

  • 执行完成后将会还原

div {
    width: 100px;
    height: 100px;
    background: blue;
    transition: transform 2s;
}
 div:hover {
  transform: translate(200px);
 }

旋转 rotate

  • 参数只有一个

  • 单位deg

  • 围绕中心z旋转

  • 正数顺时针 ,负数逆时针

div {
    width: 100px;
    height: 100px;
    background: blue;
    transition: transform 2s;
}
div:hover {
      transform: rotate(20deg);
}

缩放scale

  • 一个值代表x与y

  • 两个值第一个x 第二个y

  • 无单位

  • x正数向左变形 负数向右 y正数向上 负数向下

  • 以中心

div {
    width: 100px;
    height: 100px;
    background: blue;
    transition: transform 2s;
}
div:hover {
     transform: scale(1, 2);
}

变形skew

  • 一个值代表x与y

  • 两个值第一个x 第二个y

  • 无单位deg

  • x正数向左变形 负数向右 y正数向上 负数向下

  • 以中心

div {
    width: 100px;
    height: 100px;
    background: blue;
    transition: transform 2s;
}
div:hover {
    transform: skew(20deg, 50deg);
}

变化原点 transform-origin 改变原点位置

  • 默认是transform-origin:center center

  • 原点关键字 top left bottom right center

  • 偏移量左上角

  • 可以使用px em 百分比

  • 只设置一个默认其他cener

变化后的特点

  • 不会脱离文档流

  • 可以移除屏幕或者遮挡

  • 必须是display:block 或者inline-block或者改变父元素display为flex或grid

  • 可以设置多个动画样式,从左到右 空格分开

div {
    width: 100px;
    height: 100px;
    background: blue;
    transition: transform 2s;
}
div:hover {
    transform: skew(20deg, 50deg);
    transform-origin: right;
    //  transform: scale(1, 2) skew(20deg, 50deg);
}

3D变换

translate3d

  • x,y,z三个参数必填

  • x 正数向右,负向左

  • y 正数向下,负向下

  • z 正数向屏幕外 ,负向屏幕内

/* 3d变化 */
transform-style: preserve-3d;
/*视角*/
perspective: 1000px;
子元素
transform: translate3d(20px, 10px, 100px);

旋转rotate3d rotateX routateY rotate Z

  • transform: rotateX(45deg) – 沿着 x 轴正方向旋转 45 度 transform: rotateY(45deg) – 沿着 y 轴正方向旋转 45 度 transform: rotateZ(45deg) – 沿着 z 轴正方向旋转 45 度 transform: rotate3d(x, y, z, 45deg) – 沿着自定义轴旋转 45 deg 为角度

  • 默认可见的 backface-visibility: visible; 不可见 backface-visibility: hidden;

  • 旋转位置起点 transform-origin: left;

缩放 scale3d scaleX scaleY scaleZ

动画animation

animation: name duration timing-function delay iteration-count direction;

animation-name 规定需要绑定到选择器的 keyframe 名称。。 animation-duration 规定完成动画所花费的时间,以秒或毫秒计。 animation-timing-function 规定动画的速度曲线。 animation-delay 规定在动画开始之前的延迟。 animation-iteration-count 规定动画应该播放的次数。 animation-direction 规定是否应该轮流反向播放动画。

<style> 
div{
width:100px;
height:100px;
background:blue;
position:relative;
animation:mymove 2s infinite;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
</style>
<body>
<div></div>
</body>

标签:动画,transition,100px,transform,介绍,width,animation,div,CSS
来源: https://blog.csdn.net/weixin_43876728/article/details/119280525

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有