擬似要素のテキストを垂直にアニメーションさせる
擬似要素でテキストを2つ加えたのは,
.animation-2 span {
height: 50%;
width: 100%;
overflow: hidden;
}
そしてつぎのように,transition-timing-function
は,transition
にも定められるタイミング関数を設定するease
だ。
.animation-2 span::before {
transition: 0.5s;
transform: translateY(100%);
}
.animation-2:hover span::before {
transform: translateY(0);
transition-timing-function: ease-out;
}
タイミング関数のease-in
の値の変化は,
2つ目の擬似要素で下半分のテキストアニメーションを加える
前項では,<span>
要素は,:first-child
と:last-child
で切り分ければよい
.animation-2 span::before {
/* transform: translateY(100%); */
}
.animation-2 span:first-child::before {
transform: translateY(100%);
}
下半分は,<span>
要素の位置top
プロパティ)
.animation-2 span:last-child {
top: 50%;
}
.animation-2 span:last-child::before {
bottom: 0;
transform: translateY(-100%);
}
仕上げに,class
属性"animation-2")transition
プロパティを定めた。2つめの秒数値は,none
に切り替え,color
プロパティを透明transparent
)
.animation-2 {
transition: 0.5s 0.25s;
}
.animation-2:hover {
transition: none;
color: transparent;
}
これで,<body>
要素に加えたHTMLコードは,
コード3 水平に横切る線と真ん中から上下に広がるテキストのアニメーション
.animation-2 {
font-weight: 800;
color: Steelblue;
font-family: 'Dosis', sans-serif;
transition: 0.5s 0.25s;
overflow: hidden;
line-height: 1.3em;
margin-top: -0.2em;
}
.animation-2:hover {
transition: none;
color: transparent;
}
.animation-2::before {
content: '';
width: 100%;
height: 6px;
background: white;
position: absolute;
top: 50%;
transform: translateX(-100%);
transition: 0.4s ease-in-out;
}
.animation-2:hover::before {
transform: translateX(100%);
}
.animation-2 span {
position: absolute;
height: 50%;
width: 100%;
left: 0;
overflow: hidden;
}
.animation-2 span::before {
content: attr(data-letters);
position: absolute;
color: white;
transition: 0.5s;
}
.animation-2 span:last-child {
top: 50%;
}
.animation-2 span:first-child::before {
transform: translateY(100%);
}
.animation-2 span:last-child::before {
bottom: 0;
transform: translateY(-100%);
}
.animation-2:hover span::before {
transform: translateY(0);
transition-timing-function: ease-out;
}
サンプル1 CSS3:Text styles and hover effects