CSS3特殊効果 紐にぶら下がった猫が左右に揺れるアニメーション

CSS3特殊効果 紐にぶら下がった猫が左右に揺れるアニメーションはCSS3で作られた揺れるアニメーション効果です

<頭>
<メタ文字セット="utf-8">
<title>css3猫挂在線球上左右摇摆アニメーション画特效</title>

<スタイル>
.all-wrap {
-webkit-animation: bob 7s cubic-bezier(0.5, 0, 0.5, 1) 無限両方;
アニメーション: bob 7s cubic-bezier(0.5, 0, 0.5, 1) 無限両方;
}

。全て {＃＃＃ 上: 10レム;
左: calc(50% - 2.5rem);
位置: 絶対;
幅: 5レム;
高さ: 5レム;
-webkit-transform-origin: center -20rem;
変換原点: 中心 -20rem;
-webkit-animation: スイング 7s cubic-bezier(0.5, 0, 0.5, 1) 無限両方;
アニメーション: スイング 7 s cubic-bezier(0.5, 0, 0.5, 1) 無限両方;
}
.all:前 {
高さ: 20レム;
幅: 2px;
背景色: #DB242A;
左: calc(50% - 1px);
下: 20レム;
}

.yarn {
位置: 絶対;
上: 0;
左: 0;
幅: 80px;
高さ: 80px;
境界半径: 50%;
背景画像: -webkit-radial-gradient(左上、円、#e97c7f、#db242a 50%、#af1d22);
背景画像: 放射状グラデーション(左上の円、#e97c7f、#db242a 50%、#af1d22);
z インデックス: 1;
}
.yarn:前、.yarn:後 {
位置: 絶対;
幅: 20px;
高さ: 20px;
境界半径: 50%;
背景色: 白;
上: -1px;
}
.yarn:前 {
左: calc(50% 7px);
背景色: #b1bce6;
}
.yarn:{
の後 右: calc(50% 7px);
背景色: #D5E8F8;
}

.cat-wrap {
位置: 絶対;
上: 0;
左: calc(50% - 45px);
幅: 90px;
高さ: 130px;
-webkit-animation: 逆スイング 7s cubic-bezier(0.5, 0, 0.5, 1) 無限両方;
アニメーション: 逆スイング 7 s cubic-bezier(0.5, 0, 0.5, 1) 無限両方;
-webkit-transform-origin: 中央上部;
変換原点: 中央上部;
}

。猫 {＃＃＃ 位置: 絶対;
上: 0;
左: 0;
幅: 100%;
高さ: 100%;
-webkit-animation: スイング 7 秒 0.2 秒 無限両方;
アニメーション: スイング 7 秒 0.2 秒 無限両方;
-webkit-transform-origin: 中央上部;
変換原点: 中央上部;
}

.cat-upper {
位置: 絶対;
上: 0;
左: 0;
幅: 100%;
高さ: 100%;
-webkit-transform-origin: 中央上部;
変換原点: 中央上部;
z インデックス: 1;
}
.cat-upper .cat-leg {
位置: 絶対;
幅: 20px;
高さ: 100%;
背景色: 白;
z インデックス: -1;
背景画像: -webkit-linear-gradient(左、#D5E8F8、#D5E8F8 20%、#8B9BD9);
背景画像: 線形グラデーション(右へ、#D5E8F8、#D5E8F8 20%、#8B9BD9);
}
.cat-upper .cat-leg:nth-child(1) {
ボーダー左上半径: 100px;
左: 10px;
}
.cat-upper .cat-leg:nth-child(1):after {
左: 50%;
}
.cat-upper .cat-leg:nth-child(2) {
ボーダー左上の半径: 0;
ボーダー右上半径: 100px;
右: 10px;
}
.cat-upper .cat-leg:nth-child(2):after {
右: 50%;
}

.cat- lower-wrap {
高さ: 90%;
幅: 100%;
位置: 絶対;
上: 100%;
幅: 75px;
左: calc(50% - 37.5px);
-webkit-animation: 逆スイング 7 秒 0.2 秒 無限両方;
アニメーション: 逆スイング 7 秒 0.2 秒 無限両方;
-webkit-transform-origin: 中央上部;
変換原点: 中央上部;
}

.cat- lower {
位置: 絶対;
上: 0;
左: 0;
幅: 100%;
高さ: 100%;
-webkit-animation: スイング 7 秒 0.5 秒 無限両方;
アニメーション: スイング 7 秒 0.5 秒 無限両方;
-webkit-transform-origin: 中央上部;
変換原点: 中央上部;
}
.cat- lower: {
の後 位置: 絶対;
上: 0;
左: 0;
幅: 100%;
高さ: 100%;
境界半径: 100px;
背景画像: -webkit-radial-gradient(10px 50px, 円, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
背景画像: 放射状グラデーション(10px 50px の円、#ffffff、#ffffff 40%、#d5e8f8 65%、#8b9bd9);
z インデックス: 1;
}
.cat- lower .cat-leg、 .cat- lower .cat-paw {
z インデックス: -1;
位置: 絶対;
高さ: 20px;
幅: 20px;
-webkit-animation: スイングレッグ 7 秒 0.3 秒 無限両方;
アニメーション: スイングレッグ 7 秒 0.3 秒 無限両方;
z インデックス: 1;
-webkit-transform-origin: 中央上部;
変換原点: 中央上部;
ボーダー左上半径: 20px;
ボーダー右上半径: 20px;
背景画像: -webkit-linear-gradient(左、白、#D5E8F8、#8B9BD9);
背景画像: 線形グラデーション(右へ、白、#D5E8F8、#8B9BD9);
}
.cat- lower > .猫脚 {
下: 20px;
}
.cat- lower > .猫脚 .猫脚 {
トップ: 25%;
}
.cat- lower > .猫脚 .猫脚 {
右: 0;
}
.cat- lower .cat-paw {
トップ: 50%;
境界半径: 50%;
背景色: #fff;
}
.cat- lower .cat-tail {
位置: 絶対;
高さ: 15px;
幅: 10px;
-webkit-animation: スイングテール 7s cubic-bezier(0.5, 0, 0.5, 1) 無限両方;
アニメーション: スイングテール 7s cubic-bezier(0.5, 0, 0.5, 1) 無限両方;
-webkit-transform-origin: 中央上部;
変換原点: 中央上部;
z インデックス: 0;
背景画像: -webkit-linear-gradient(左、白、#D5E8F8、#8B9BD9);
背景画像: 線形グラデーション(右へ、白、#D5E8F8、#8B9BD9);
ボーダー左下半径: 10px;
ボーダー右下半径: 10px;
}
.cat- lower .cat-tail > .cat-tail {
トップ: 50%;
}
.cat- lower > .cat-tail {
左: calc(50% - 5px);
トップ: 95%;
}

.cat-head {
幅: 90px;
高さ: 90px;
背景画像: -webkit-radial-gradient(10px 10px, 円, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
背景画像: 放射状グラデーション(10px 10pxの円、#ffffff、#ffffff 40%、#d5e8f8 65%、#8b9bd9);
境界半径: 50%;
上: calc(100% - 45px);
}

。猫顔 {＃＃＃ 位置: 絶対;
上: 0;
左: 0;
高さ: 100%;
幅: 100%;
-webkit-animation: face 7s cubic-bezier(0.5, 0, 0.5, 1) 無限両方;
アニメーション: face 7s cubic-bezier(0.5, 0, 0.5, 1) 無限両方;
-webkit-transform-style:preserve-3d;
変換スタイル: 保存 3d;
-webkit-perspective: 100px;
視点: 100px;
}

.猫耳 {
位置: 絶対;
上: 0;
左: 0;
高さ: 50%;
幅: 100%;
z インデックス: -1;
}

.猫耳 {
幅: 20px;
高さ: 100%;
位置: 絶対;
境界半径: 5px;
上: -10px;
}
.cat-ear:first-child {
左: 0;
-webkit-transform-origin: 左上;
変換原点: 左上;
-webkit-transform: skewY(40deg);
変換: skewY(40deg);
背景色: 白;
}
.cat-ear:first-child:before {
左: 0;
ボーダー右上半径: 50%;
ボーダー右下半径: 50%;
背景色: #D7EBFB;
}
.cat-ear:last-child {
右: 0;
-webkit-transform-origin: 右上;
変換原点: 右上;
-webkit-transform: skewY(-40deg);
変換: skewY(-40deg);
背景色: #d1e6f7;
}
.cat-ear:last-child:before {
右: 0;
ボーダー左上の半径: 50%;
境界左下の半径: 50%;
背景色: #e0f0fc;
}
.cat-ear:前 {
幅: 60%;
高さ: 100%;
上: 10px;
位置: 絶対;
背景色: #fff;
}

.猫の目 {
位置: 絶対;
トップ: 50%;
幅: 100%;
高さ: 6px;
-webkit-animation: 点滅 7 秒ステップエンド無限両方;
アニメーション: 点滅 7 秒ステップエンド無限両方;
}
.cat-eyes:前、.cat-eyes:後 {
位置: 絶対;
高さ: 6px;
幅: 6px;
境界半径: 50%;
背景色: #4B4D75;
}
.cat-eyes:前 {
左: 20px;
}
.cat-eyes:{
の後 右: 20px;
}

.猫口 {
位置: 絶対;
幅: 12px;
高さ: 8px;
背景色: #4B4D75;
トップ: 60%;
左: calc(50% - 6px);
ボーダー左上半径: 50% 30%;
ボーダー右上半径: 50% 30%;
境界左下半径: 50% 70%;
ボーダー右下半径: 50% 70%;
-webkit-transform:translateZ(10px);
変換:translateZ(10px);
}
.cat-mouth:前、.cat-mouth:後 {
位置: 絶対;
幅: 90%;
高さ: 100%;
境界線: 2 ピクセルの実線 #9FA2CB;
上: 80%;
境界半径: 100px;
境界上の色: 透明;
z インデックス: -1;
}
.cat-mouth:前 {
境界左の色: 透明;
右: calc(50% - 1px);
-webkit-transform-origin: 右上;
変換原点: 右上;
-webkit-transform: 回転(10度);
変換: 回転(10度);
}
.猫口:{
の後 境界線の右の色: 透明;
左: calc(50% - 1px);
-webkit-transform-origin: 左上;
変換原点: 左上;
-webkit-transform: 回転(-10度);
変換: 回転(-10度);
}

.cat-ひげ {
幅: 50%;
高さ: 8px;
位置: 絶対;
下: 25%;
左: 25%;
-webkit-transform-style:preserve-3d;
変換スタイル: 保存 3d;
-webkit-perspective: 60px;
視点: 60px;
}
.cat-ひげ:前、.cat-ひげ:後 {
位置: 絶対;
高さ: 100%;
幅: 30%;
境界線: 2 ピクセルの実線 #9FA2CB;
左端の境界線: なし;
右境界線: なし;
}
.cat-whiskers:{
より前 右: 100%;
-webkit-transform-origin: 右中央;
変換原点: 右中央;
-webkit-transform: 回転Y(70度) 回転Z(-10度);
変換: 回転Y(70度) 回転Z(-10度);
}
.cat-whiskers:{
の後 左: 100%;
-webkit-transform-origin: 左中央;
変換原点: 左中央;
-webkit-transform: 回転Y(-70度) 回転Z(10度);
変換: 回転Y(-70度) 回転Z(10度);
}

@-webkit-keyframes ボブ {
0% {
-webkit-transform:translateY(0.4rem);
変換:translateY(0.4rem);
}
6.25% {
-webkit-transform:translateY(-0.4rem);
変換:translateY(-0.4rem);
}
12.5% {
-webkit-transform:translateY(0.4rem);
変換:translateY(0.4rem);
}
18.75% {
-webkit-transform:translateY(-0.4rem);
変換:translateY(-0.4rem);
}
25% {
-webkit-transform:translateY(0.4rem);
変換:translateY(0.4rem);
}
31.25% {
-webkit-transform:translateY(-0.4rem);
変換:translateY(-0.4rem);
}
37.5% {
-webkit-transform:translateY(0.4rem);
変換:translateY(0.4rem);
}
43.75% {
-webkit-transform:translateY(-0.4rem);
変換:translateY(-0.4rem);
}
50% {
-webkit-transform:translateY(0.4rem);
変換:translateY(0.4rem);
}
56.25% {
-webkit-transform:translateY(-0.4rem);
変換:translateY(-0.4rem);
}
62.5% {
-webkit-transform:translateY(0.4rem);
変換:translateY(0.4rem);
}
68.75% {
-webkit-transform:translateY(-0.4rem);
変換:translateY(-0.4rem);
}
75% {
-webkit-transform:translateY(0.4rem);
変換:translateY(0.4rem);
}
81.25% {
-webkit-transform:translateY(-0.4rem);
変換:translateY(-0.4rem);
}
87.5% {
-webkit-transform:translateY(0.4rem);
変換:translateY(0.4rem);
}
93.75% {
-webkit-transform:translateY(-0.4rem);
変換:translateY(-0.4rem);
}
100% {
-webkit-transform:translateY(0.4rem);
変換:translateY(0.4rem);
}
}

@keyframes ボブ {
0% {
-webkit-transform:translateY(0.4rem);
変換:translateY(0.4rem);
}
6.25% {
-webkit-transform:translateY(-0.4rem);
変換:translateY(-0.4rem);
}
12.5% {
-webkit-transform:translateY(0.4rem);
変換:translateY(0.4rem);
}
18.75% {
-webkit-transform:translateY(-0.4rem);
変換:translateY(-0.4rem);
}
25% {
-webkit-transform:translateY(0.4rem);
変換:translateY(0.4rem);
}
31.25% {
-webkit-transform:translateY(-0.4rem);
変換:translateY(-0.4rem);
}
37.5% {
-webkit-transform:translateY(0.4rem);
変換:translateY(0.4rem);
}
43.75% {
-webkit-transform:translateY(-0.4rem);
変換:translateY(-0.4rem);
}
50% {
-webkit-transform:translateY(0.4rem);
変換:translateY(0.4rem);
}
56.25% {
-webkit-transform:translateY(-0.4rem);
変換:translateY(-0.4rem);
}
62.5% {
-webkit-transform:translateY(0.4rem);
変換:translateY(0.4rem);
}
68.75% {
-webkit-transform:translateY(-0.4rem);
変換:translateY(-0.4rem);
}
75% {
-webkit-transform:translateY(0.4rem);
変換:translateY(0.4rem);
}
81.25% {
-webkit-transform:translateY(-0.4rem);
変換:translateY(-0.4rem);
}
87.5% {
-webkit-transform:translateY(0.4rem);
変換:translateY(0.4rem);
}
93.75% {
-webkit-transform:translateY(-0.4rem);
変換:translateY(-0.4rem);
}
100% {
-webkit-transform:translateY(0.4rem);
変換:translateY(0.4rem);
}
}
@-webkit-keyframes スイング {
0% {
-webkit-transform: 回転(5度);
変換: 回転(5度);
}
12.5% {
-webkit-transform: 回転(-10度);
変換: 回転(-10度);
}
25% {
-webkit-transform: 回転(10度);
変換: 回転(10度);
}
37.5% {
-webkit-transform: 回転(-15度);
変換: 回転(-15度);
}
50% {
-webkit-transform: 回転(23度);
変換: 回転(23度);
}
62.5% {
-webkit-transform: 回転(-23度);
変換: 回転(-23度);
}
75% {
-webkit-transform: 回転(15度);
変換: 回転(15 度);
}
87.5% {
-webkit-transform: 回転(-10度);
変換: 回転(-10度);
}
100% {
-webkit-transform: 回転(5度);
変換: 回転(5度);
}
}
@keyframes スイング {
0% {
-webkit-transform: 回転(5度);
変換: 回転(5度);
}
12.5% {
-webkit-transform: 回転(-10度);
変換: 回転(-10度);
}
25% {
-webkit-transform: 回転(10度);
変換: 回転(10度);
}
37.5% {
-webkit-transform: 回転(-15度);
変換: 回転(-15度);
}
50% {
-webkit-transform: 回転(23度);
変換: 回転(23度);
}
62.5% {
-webkit-transform: 回転(-23度);
変換: 回転(-23度);
}
75% {
-webkit-transform: 回転(15度);
変換: 回転(15 度);
}
87.5% {
-webkit-transform: 回転(-10度);
変換: 回転(-10度);
}
100% {
-webkit-transform: 回転(5度);
変換: 回転(5度);
}
}
@-webkit-keyframes スイングレッグ {
0% {
-webkit-transform: 回転(0.5度);
変換: 回転(0.5度);
}
12.5% {
-webkit-transform: 回転(-1度);
変換: 回転(-1度);
}
25% {
-webkit-transform: 回転(1度);
変換: 回転(1度);
}
37.5% {
-webkit-transform: 回転(-1.5度);
変換: 回転(-1.5度);
}
50% {
-webkit-transform: 回転(2.3度);
変換: 回転(2.3度);
}
62.5% {
-webkit-transform: 回転(-2.3度);
変換: 回転(-2.3度);
}
75% {
-webkit-transform: 回転(1.5度);
変換: 回転(1.5 度);
}
87.5% {
-webkit-transform: 回転(-1度);
変換: 回転(-1度);
}
100% {
-webkit-transform: 回転(0.5度);
変換: 回転(0.5度);
}
}
@keyframes スイングレッグ {
0% {
-webkit-transform: 回転(0.5度);
変換: 回転(0.5度);
}
12.5% {
-webkit-transform: 回転(-1度);
変換: 回転(-1度);
}
25% {
-webkit-transform: 回転(1度);
変換: 回転(1度);
}
37.5% {
-webkit-transform: 回転(-1.5度);
変換: 回転(-1.5度);
}
50% {
-webkit-transform: 回転(2.3度);
変換: 回転(2.3度);
}
62.5% {
-webkit-transform: 回転(-2.3度);
変換: 回転(-2.3度);
}
75% {
-webkit-transform: 回転(1.5度);
変換: 回転(1.5 度);
}
87.5% {
-webkit-transform: 回転(-1度);
変換: 回転(-1度);
}
100% {
-webkit-transform: 回転(0.5度);
変換: 回転(0.5度);
}
}
@-webkit-keyframes スイングテール {
0% {
-webkit-transform: 回転(-2度);
変換: 回転(-2度);
}
12.5% {
-webkit-transform: 回転(4度);
変換: 回転(4度);
}
25% {
-webkit-transform: 回転(-4度);
変換: 回転(-4度);
}
37.5% {
-webkit-transform: 回転(6度);
変換: 回転(6度);
}
50% {
-webkit-transform: 回転(-9.2度);
変換: 回転(-9.2度);
}
62.5% {
-webkit-transform: 回転(9.2度);
変換: 回転(9.2度);
}
75% {
-webkit-transform: 回転(-6度);
変換: 回転(-6度);
}
87.5% {
-webkit-transform: 回転(4度);
変換: 回転(4度);
}
100% {
-webkit-transform: 回転(-2度);
変換: 回転(-2度);
}
}
@keyframes スイングテール {
0% {
-webkit-transform: 回転(-2度);
変換: 回転(-2度);
}
12.5% {
-webkit-transform: 回転(4度);
変換: 回転(4度);
}
25% {
-webkit-transform: 回転(-4度);
変換: 回転(-4度);
}
37.5% {
-webkit-transform: 回転(6度);
変換: 回転(6度);
}
50% {
-webkit-transform: 回転(-9.2度);
変換: 回転(-9.2度);
}
62.5% {
-webkit-transform: 回転(9.2度);
変換: 回転(9.2度);
}
75% {
-webkit-transform: 回転(-6度);
変換: 回転(-6度);
}
87.5% {
-webkit-transform: 回転(4度);
変換: 回転(4度);
}
100% {
-webkit-transform: 回転(-2度);
変換: 回転(-2度);
}
}
@-webkit-keyframes 逆スイング {
0% {
-webkit-transform: 回転(-5度);
変換: 回転(-5度);
}
12.5% {
-webkit-transform: 回転(10度);
変換: 回転(10度);
}
25% {
-webkit-transform: 回転(-10度);
変換: 回転(-10度);
}
37.5% {
-webkit-transform: 回転(15度);
変換: 回転(15 度);
}
50% {
-webkit-transform: 回転(-23度);
変換: 回転(-23度);
}
62.5% {
-webkit-transform: 回転(23度);
変換: 回転(23度);
}
75% {
-webkit-transform: 回転(-15度);
変換: 回転(-15度);
}
87.5% {
-webkit-transform: 回転(10度);
変換: 回転(10度);
}
100% {
-webkit-transform: 回転(-5度);
変換: 回転(-5度);
}
}
@keyframes 逆スイング {
0% {
-webkit-transform: 回転(-5度);
変換: 回転(-5度);
}
12.5% {
-webkit-transform: 回転(10度);
変換: 回転(10度);
}
25% {
-webkit-transform: 回転(-10度);
変換: 回転(-10度);
}
37.5% {
-webkit-transform: 回転(15度);
変換: 回転(15 度);
}
50% {
-webkit-transform: 回転(-23度);
変換: 回転(-23度);
}
62.5% {
-webkit-transform: 回転(23度);
変換: 回転(23度);
}
75% {
-webkit-transform: 回転(-15度);
変換: 回転(-15度);
}
87.5% {
-webkit-transform: 回転(10度);
変換: 回転(10度);
}
100% {
-webkit-transform: 回転(-5度);
変換: 回転(-5度);
}
}
@-webkit-keyframes 顔 {
0% {
-webkit-transform:translateX(-2.5px);
変換:translateX(-2.5px);
}
12.5% {
-webkit-transform:translateX(5px);
変換:translateX(5px);
}
25% {
-webkit-transform:translateX(-5px);
変換:translateX(-5px);
}
37.5% {
-webkit-transform:translateX(7.5px);
変換:translateX(7.5px);
}
50% {
-webkit-transform:translateX(-11.5px);
変換:translateX(-11.5px);
}
62.5% {
-webkit-transform:translateX(11.5px);
変換:translateX(11.5px);
}
75% {
-webkit-transform:translateX(-7.5px);
変換:translateX(-7.5px);
}
87.5% {
-webkit-transform:translateX(5px);
変換:translateX(5px);
}
100% {
-webkit-transform:translateX(-2.5px);
変換:translateX(-2.5px);
}
}
@keyframes 顔 {
0% {
-webkit-transform:translateX(-2.5px);
変換:translateX(-2.5px);
}
12.5% {
-webkit-transform:translateX(5px);
変換:translateX(5px);
}
25% {
-webkit-transform:translateX(-5px);
変換:translateX(-5px);
}
37.5% {
-webkit-transform:translateX(7.5px);
変換:translateX(7.5px);
}
50% {
-webkit-transform:translateX(-11.5px);
変換:translateX(-11.5px);
}
62.5% {
-webkit-transform:translateX(11.5px);
変換:translateX(11.5px);
}
75% {
-webkit-transform:translateX(-7.5px);
変換:translateX(-7.5px);
}
87.5% {
-webkit-transform:translateX(5px);
変換:translateX(5px);
}
100% {
-webkit-transform:translateX(-2.5px);
変換:translateX(-2.5px);
}
}
@-webkit-keyframes フェードイン {
から {＃＃＃ 不透明度: 0;
}
に {＃＃＃ 不透明度: 1;
}
}
@keyframes フェードイン {
から {＃＃＃ 不透明度: 0;
}
に {＃＃＃ 不透明度: 1;
}
}
@-webkit-keyframes 点滅 {
から、〜、10%、25%、80% {
-webkit-transform:scaleY(1);
変換: スケール Y(1);
}
8%、23%、78% {
-webkit-transform: スケール Y(0.1);
変換: スケール Y(0.1);
}
}
@keyframes 点滅 {
から、〜、10%、25%、80% {
-webkit-transform:scaleY(1);
変換: スケール Y(1);
}
8%、23%、78% {
-webkit-transform: スケール Y(0.1);
変換: スケール Y(0.1);
}
}
本文、html {
高さ: 100%;
幅: 100%;
マージン: 0;
パディング: 0;
背景色: #1F1F3C;
オーバーフロー: 非表示;
}

*、 *：ビフォアーアフター {＃＃＃ ボックスのサイズ設定: ボーダーボックス;
位置: 相対;
-webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
アニメーション タイミング関数: cubic-bezier(0.5, 0, 0.5, 1);
-webkit-animation-fill-mode: 両方;
アニメーションフィルモード: 両方;
}

*：ビフォアーアフター {＃＃＃ コンテンツ： '';＃＃＃ 表示ブロック;＃＃＃ }