CSS3 变形/ 变换动画知识概述

最新推荐文章于 2023-03-19 16:24:00 发布

墨韵成香

最新推荐文章于 2023-03-19 16:24:00 发布

阅读量107

点赞数

原文链接：http://www.cnblogs.com/pangwl/p/7306289.html

版权

CSS3 变形/变换

只能用块状元素或者inline-block;

变形方法 transform-function

2d位移
- translate()
- translatex()
- translatey()
2d缩放
- scale(数字)
- scalex()
- scaley()
2d旋转
- rotate()
2d扭曲
- skew(x,y)
- skewx()
- skewy()
3d
- translatez()
- translate3d()
- scalez()
- scale3d()
- rotatex()
- rotatey()
- rotatez()

CSS过渡

触发时机

伪类选择器
JS
媒体查询

CSS3 动画

相关属性

animation

animation-name 动画名称

  必须与规则@keyframes配合使用，因为动画名称由@keyframes定义

animation-duration 设置对象动画的持续时间

animation-timing-function 设置对象动画的过渡类型

  * ease 平滑过渡
  * linear 线性过渡
  * ease-in 由慢到快
  * ease-out 由快到慢
  * ease-in-out 由慢到快在到慢

animation-delay 指定对象动画的延迟时间
animation-iteration-count number动画循环次数
```
  默认一次 、 infinite：无限次
```

animation-diretion 设置对象动画在循环中是否反向运动

  normal 默认正常反向
  reverse：反方向运行
  alternate:动画先正常运行在反向运行，并持续交替运行

animation-play-state: 设置对象动画才状态 running/pasused

animation-fill-mode: 设置对象动画时间之外的状态

  none：默认
  forwards 设置状态为动画结束时的状态
  backgrounds:设置状态为动画开始时的状态。

关键帧

    #keyframes 动画名称{
        form{
        }
        to{
        }
    }



    动画应用（车轮滚动）：
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>CSS3动画相关属性</title>
    <style>
                @keyframes mymation{
                    from{
                        margin-left: 0px;
                        transform:rotate(0deg);
                    }
                    to{
                        margin-left: 1000px;
                        transform:rotate(720deg);
                    }
                }
                .box{
                    width:200px;
                    height:200px;
                    border-radius:100px;
                    background:url(./lun.jpg);
        
                    background-size: 100% 100%;
        
                    animation-name:mymation;
                    animation-duration: 5s;
                    animation-timing-function: linear;
                    animation-delay:1s;
                    animation-iteration-count: 2;
                    animation-fill-mode:forwards;
                    animation-direction:alternate;
                }
                .box:hove
                    animation-play-state:paused;
                }
            </style>
        </head>
        <body>
            <div class="box"></div>
        </body>
        </html>

转载于:https://www.cnblogs.com/pangwl/p/7306289.html

墨韵成香

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 变形/ 变换动画知识概述

CSS3 变形/变换只能用块状元素或者inline-block;相关属性transform 设置或检索对象的转换transform-origin 设置以某个原点进行转换transform-style: flat/preserve-3d 指定某元素的子元素是位于三维空间内，还是平面perspective: 长度单位指定观察者与【z=0】平面的距离perspective-o...
复制链接

扫一扫