詳細なCSS3アニメーション関連のプロパティ

その他 2019-07-24 01:51:42 訪問数: null

「：この記事はで再現されhttps://blog.csdn.net/lyznice/article/details/54575905」

 

、2D効果特性

これらのプロパティを使用するには、我々はまた、-webkit-変換として、ブラウザカーネルとprefix属性を追加する必要があり、互換性を保証するために、変換する必要がある、と。
図1に示すように、変位特性が（x、y）を変換します

簡単に言えば、我々は、プロジェクトは右側（x軸）の水平項目[x]は距離場合、xが正の場合、座標軸（x、y）を変換XYの原点であると言うことができ、負の左に移動しました[x]の距離。yが正の場合、その項目の垂直（y軸）は、[Y]を下降させて上方へ、およびその逆に移動します。
もちろん、我々はまた、プロパティを置く移動X（n）と移動Y（n）は、同じ原理に分かれ、一般的には、我々は包括的文言をお勧めすることができます。

断片

.box01 { 
    背景：RGBA（7,204,63,0.9）。
} 
.box02 { 
    背景：RGBA（7,204,63,0.6）。
    変換：（100pxに、100pxに）変換します。
} 
.box03 { 
    背景：RGBA（7,204,63,0.6）。
    変換：変換（-100px、-100px）。
} 
.box04 { 
    背景：RGBA（7,204,63,0.3）。
    変換：移動X（-300px）。
}

　　

図2に示すように、回転プロパティ回転（）

このプロパティは、（N゜）は、回転すると、また、非常に簡単であり、nは、度を単位数である、角度として解釈することができ、値は0degに回転していません。Nは反時計回り、逆に、n個の正、時計回りの回転です。
そして、回転X回転Yプロパティ、それは目に見える立体的な3D効果のように要約することができ、我々は以下を言います。

.box01{
    background: rgba(7,204,63,0.6);
    transform: translate(-200px,0) rotate(-90deg);
}
.box02{
    background: rgba(7,204,63,0.9);
}
.box03{
    background: rgba(7,204,63,0.6);
    transform: translate(200px,0) rotate(45deg);
}

　

3、缩放属性 scale()

scale( x , y )，width为原有的值的 x 倍，height为原有的值的 y 倍。

.box01{
    background: rgba(7,204,63,0.9);
}
.box02{
    background: rgba(7,204,63,0.6);
    transform: scale(1.5,0.5);
}
.box03{
    background: rgba(7,204,63,0.6);
    transform: scale(0.5,1.5);
}

　　

4、倾斜属性 skew()

skew( x deg, y deg ) ,分别表示 X轴和 Y轴倾斜的角度。值可以为负，反方向。
该属性也可以拆分为，skewX( ndeg )，skewY( ndeg )，对 X轴和 Y轴的倾斜角度分别描述。
就我本人而言，这个属性我项目中很少用

二、3D效果属性

3D效果就是立体效果，怎么实现一个3D效果的动画呢？让我们分步来说。
实现3D效果的，相关的属性，很多，兼容性也不一样，我们这里只说一些最常用的属性和使用方法。
我们在这里简单分为三步，第一步是立体环境，第二步是项目的动作或者说操作，第三部则是完成这些动作的规律，比如说时间，速度等。这些综合起来，就是一个3D效果的动画。

1、跟2D动画不同的是，我们需要在外层元素上添加这两个属性（环境）：

1） transform-style：flat / preserve-3d 默认前一个，但是3D效果需要我们在整个动画的最外层元素，设置后一个属性值。
2） perspective：none / px 这个属性可以理解为视距，如果把屏幕当作空间，我们做的这个3D效果距离视图的距离，默认为none（那就不要用了），或者是像素值，如1000px。

2、实现一个3D动画，在2D相关属性使用的基础上，我们还经常用的这几个（动作）：

1） 3D旋转 rotateX( deg ) rotateY( deg ) rotateZ( deg ) ，deg为旋转角度，单位deg，绕XYZ轴旋转的情况，来设定rotateX/Y/Z。
2） 3D偏移 translateZ() translate在2D动画中是偏移，在3D中同样也是如此，只是，在3D效果中我们增加了一个Z轴偏移。
3）3D缩放 scale3d(x,y,z) 也可以分开写，如scaleZ()

我们简单先来看一下效果

3、一个动画，我们怎么设置它的启动方式，动画效果怎么样，是快是慢，匀速还是其他，什么时候启动。我们一般都通过 transition 这个过渡属性来设置，当然，2D动画也可以用这个属性。

这个属性可以拆分为：
transition-property（过渡的属性的名称）。
transition-duration（定义过渡效果花费的时间,默认是 0）。
transition-timing-function:linear(匀速) ease(慢速开始，然后变快，然后慢速结束)（规定过渡效果的时间曲线，最常用的是这两个）。
transition-delay（规定过渡效果何时开始。默认是 0）。
当然，一般情况下，我们都是写一起的，比如：transition： width 2s ease 1s 。

综合上面三点下面附上一个简单demo的代码

<div class="box">
    <div class="box01">translateZ(-50px)</div>
    <div class="box02">rotateX(360deg)</div>
    <div class="box03">rotateY(360deg)</div>
</div>

　　

.box{
    height: 300px;
    width: 700px;
    margin: 0 auto;
    margin-top: 100px;
    border: 2px solid green;
    position: relative;
    transform-style:preserve-3d;
    perspective:1000px;
}
.box div{
    height: 150px;
    width: 150px;
    float: left;
    margin-right: 30px;
    position: relative;
}
.box01{
    background: rgba(7,204,63,0.9);
    transition: all 3s;

}
.box02{
    background: rgba(7,204,63,0.6);
    transition: all 3s;
}
.box03{
    background: rgba(7,204,63,0.6);
    transition: all 3s
}
.box01:hover{
    transform: translateZ(-50px);
}
.box02:hover{
    transform: rotateX(360deg);

}
.box03:hover{
    ;
    transform: rotateY(360deg);
}

　　

三、关键帧动画

实际项目中，仅仅是上面的那些知识，是不能满足我们对动画效果的要求的，还有个关键的知识点就是关键帧动画。
什么是关键帧动画，你可以理解为，我们可以通过这个对一个动画的过程的每一部分的表现都做出要求。

一个关键帧动画，最少包含两部分，animation 属性及属性值（动画的名称和运行方式运行时间等）。@keyframes（规定动画的具体实现过程）

animation 属性可以拆分为（当然，我们一般都写一起）
1）animation-name 规定@keyframes 动画的名称。
2）animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
3）animation-timing-function 规定动画的速度曲线。默认是 “ease”，常用的还有linear，同transtion 。
4）animation-delay 规定动画何时开始。默认是 0。
5）animation-iteration-count 规定动画被播放的次数。默认是 1，但我们一般用infinite，一直播放。

而@keyframes的使用方法，可以是from->to（等同于0%和100%），也可以是从0%->100%之间任意个的分层设置。我们通过下面一个稍微复杂点的demo来看一下，基本上用到了上面说到的大部分知识。

eg:
   @keyframes mymove
  {
      from {top:0px;}
      to {top:200px;}
  }

等同于：

  @keyframes mymove
  { 
     0%   {top:0px;}
     25%  {top:200px;}
     50%  {top:100px;}
     75%  {top:200px;}
     100% {top:0px;}
  }

　　

双重立方体旋转

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<style type="text/css">
*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}
body{
    background: #9CC;
    perspective:1000px;
}
.box{
    height:200px;
    width: 200px;
    position: relative;
    margin:200px auto;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    transform:rotateX(20deg) rotateY(20deg);
    animation:one 5s linear infinite;
    -webkit-animation:one 5s linear infinite;
}
@keyframes one{
    from{
        transform:rotateX(-20deg) rotateY(0deg) ;
    }
    to{
        transform:rotateX(340deg) rotateY(360deg) ;
    }
}
@-webkit-keyframes one{
    from{
        transform:rotateX(-20deg) rotateY(0deg) ;
    }
    to{
        transform:rotateX(340deg) rotateY(360deg) ;
    }
}
.box div{
    width:200px;
    height: 200px;
    background: black;
    opacity: 0.3;
    position: absolute;
    top:0;
    left:0;
    border: 1px solid white;
    transition:all 2s;
}
.box span{
    width: 100px;
    height: 100px;
    background: orange;
    position:absolute;
    border: 1px solid white;
    top:50%;
    left:50%;
    opacity: 0.7;
    margin-top: -50px;
    margin-left: -50px;
    font-size: 50px;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 100px;
}
.box div:nth-child(1){
    transform:translateZ(100px);

}
.box div:nth-child(2){
    transform:translateZ(-100px);

}
.box div:nth-child(3){

    transform:rotateX(90deg) translateZ(100px);

}
.box div:nth-child(4){
    transform:rotateX(90deg) translateZ(-100px);

}
.box div:nth-child(5){
    transform:rotateY(90deg) translateZ(100px);

}
.box div:nth-child(6){
    transform:rotateY(90deg) translateZ(-100px);

}
.box:hover div:nth-child(1){
    transform:translateZ(200px);
}
.box:hover div:nth-child(2){
    transform:translateZ(-200px);

}
.box:hover div:nth-child(3){

    transform:rotateX(90deg) translateZ(200px);

}
.box:hover div:nth-child(4){
    transform:rotateX(90deg) translateZ(-200px);

}
.box:hover div:nth-child(5){
    transform:rotateY(90deg) translateZ(200px);

}
.box:hover div:nth-child(6){
    transform:rotateY(90deg) translateZ(-200px);

}
.box span:nth-child(7){
    transform:translateZ(50px);

}
.box span:nth-child(8){
    transform:translateZ(-50px) rotateY(180deg);

}
.box span:nth-child(9){
    transform:rotateX(90deg) translateZ(50px);

}
.box span:nth-child(10){
     transform:rotateX(90deg) translateZ(-50px);

}
.box span:nth-child(11){
    transform:rotateY(90deg) translateZ(50px);

}
.box span:nth-child(12){
     transform:rotateY(270deg) translateZ(50px);
}

</style>
</head>
<body>
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <span>1</span>
    <span>6</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>2</span>
</div>


</body>
</html>

 

おすすめ

転載: www.cnblogs.com/hzb462606/p/11233787.html
おすすめ
ランキング
欲張りアルゴリズムLeetcode45ジャンプゲームの証明プロセス
Résumé des outils couramment utilisés pour l'acoustique et l'informatique musicale (soundfile, librosa, pydub, madmom, spleeter)
OpenCVの。コンセプト
直接公式招待コード88886981の下ダイハツ
ミリ秒の形式に現在時刻を取得するJava
umijs/plugin-qiankun (vue+umi) に基づくマイクロフロントエンド構成
クローン化されたカードからLinux仮想マシンは、eth1にはeth0になり
10G SFP + 10G XFP光モジュール及び光モジュール
DevExpressがDateEditを設定して年、月、四半期を表示
Mavenがローカルに外部jarパッケージをインポートする
アーカイブ
もっと
2024-05-19(0)
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)

コードワールド

© 2018 codetd.com