CSS3 动画技巧——掌握Animations

发表时间: 2024-04-18 10:20

CSS3 Animations

1 @keyframes属性

@keyframes 动画名称{关键帧持续时间% {css样式;}}

@keyframes myanimation{    0% {top:0px;background-color:#0000cc;}    50% {top:100px;background-color;#339900;}    100% {top:0px;background-color:#330000;}}

2 animation属性

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

animation-name 规定需要绑定到选择器的 keyframe 名称。。

animation-duration 规定完成动画所花费的时间, 以秒或毫秒计。

animation-timing-function 规定动画的速度曲线。

linear 动画从头到尾的速度是相同的。

ease 默认。动画以低速开始, 然后加快, 在结束前变慢。

ease-in 动画以低速开始。

ease-out 动画以低速结束。

ease-in-out 动画以低速开始和结束。

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。参考地址: http://cubic-bezier.com/#.17,.67,.83,.67

animation-delay 规定在动画开始之前的延迟。以秒或毫秒计, 默认值是 0。

animation-iteration-count 规定动画应该播放的次数。

n 定义动画播放次数的数值。

infinite 规定动画应该无限次播放。

animation-direction 规定是否应该轮流反向播放动画。

normal 默认值。动画应该正常播放。

alternate 动画应该轮流反向播放。

使用方法一: from...to...

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{    margin: 0;    padding: 0;}div{    width: 100px;    height: 100px;    background-color: orange;}/*div:hover{width: 800px;}*//*@keyframes 动画名{from{动画第一步(这里你可以不写他会继承上面的)}to{动画最后一步}}*//*动画声明*/@keyframes widthChange{/*from{width: 100px;}*/to{width: 800px;}}div{    /*animation: 动画名称 过渡总时长;*/    animation: widthChange 1s;}</style></head><body><div></div></body></html>

使用方法二: 百分比

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}div{width: 100px;height: 100px;background-color: orange;position: absolute;left: 0;top: 0;}/*动画声明*/@keyframes positionChange{    /*from{    left: 0;    }    to{    left: 800px;    }*/    /*百分数评分的的过渡总时长*/    0%{    left: 0;    top: 0;    }    50%{    left: 800px;    top: 0;    }    100%{    left: 800px;    top: 500px;    }}div{    /*animation: 动画名称 过渡总时长;*/    animation: positionChange 10s;}</style></head><body><div></div></body></html>

使用方法三: animation参数格式

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{    margin: 0;    padding: 0;}div{    width: 100px;    height: 100px;    background-color: orange;}@keyframes widthChange{    to{    width: 800px;    }}div{    /*    * 动画名称    * 动画总时长s ms    * 动画形式ease ease-in ease-out ease-in-out linear 贝塞尔曲线、    * 延迟时间s ms    * 循环次数①阿拉伯数字②infinite(无限次)    * 停留到最后一帧forwards    * 反向播放动画alternate(来回当做2次处理) normal 正常    *    * */    animation: widthChange 5s;}div:hover{/*动画停止*/animation-play-state: paused}</style></head><body><div></div></body></html>

建立3D场景

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

注释：该属性必须与 transform 属性一同使用。

flat 子元素将不保留其 3D 位置。

preserve-3d 子元素将保留其 3D 位置。

transform-style: flat|preserve-3d;

perspective 属性定义 3D 元素距视图的距离, 以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时, 其子元素会获得透视效果, 而不是元素本身。

注释：perspective 属性只影响 3D 转换元素。

perspective: number|none;

景深:

perspective是设置3d效果的景深, 通俗来说就是设置你的眼睛与这个3d元素的距离。

而生活经验告诉我们, 你从远处和近处分别观察同一个物体(比如正方形)时, 其3d效果肯定是不同的。

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

当为元素定义 perspective-origin 属性时, 其子元素会获得透视效果, 而不是元素本身。

注释：该属性必须与 perspective 属性一同使用, 而且只影响 3D 转换元素。

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style type="text/css">*{    margin: 0;    padding: 0;    list-style: none;}div{    width: 300px;    height: 220px;    margin: 100px auto;    border: 1px solid #000;    transform-style: preserve-3d;    perspective: 800px;    /*景深基点基本上没人改*/    perspective-origin: left top;}img{    width: 100%;    display: block;    transition: 1s;    }    div:hover>img{    transform: rotateX(-45deg);}</style></head><body><div><img src="img/薛凯琪.jpg"/></div></body></html>

backface-visibility 属性定义当元素不面向屏幕时是否可见。

如果在旋转元素不希望看到其背面时, 该属性很有用。

背面隐藏

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style type="text/css">*{    margin: 0;    padding: 0;    list-style: none;}div{    width: 300px;    height: 220px;    margin: 100px auto;    border: 1px solid #000;transform-style: preserve-3d;    perspective: 1000px;}img{    width: 100%;    display: block;    transition: 1s;    transform-origin: left center;    /*背面隐藏*/    backface-visibility: hidden;}div:hover>img{    transform: rotateY(-100deg);}</style></head><body><div><img src="img/薛凯琪.jpg"/></div></body></html>

CSS3 动画技巧——掌握Animations

热门阅读

推荐阅读