《css揭秘》- 47个不为人知的高阶操作🔥(下篇20-47， 7K长文多图预警)（六）

/**
 * Blinking
 */
@keyframes blink-1 { 50% { color: transparent } }
@keyframes blink-2 { to { color: transparent } }
p {
    padding: 1em;
    background: gold;
}
.blink-smooth-1 {
    animation: 1s blink-1 3;
}
.blink-smooth-2 {
    animation: .5s blink-2 6;
    animation-direction: alternate;
}
.blink {
    animation: 1s blink-1 3 steps(1);
}

<h1>CSS is awesome!</h1>
/**
 * Typing animation
 */
@keyframes typing {
    from { width: 0 }
}
@keyframes caret {
    50% { border-right-color: transparent; }
}
h1 {
    font: bold 200% Consolas, Monaco, monospace;
    /*width: 8.25em;*/
    width: 15ch;
    white-space: nowrap;
    overflow: hidden;
    border-right: .05em solid;
    animation: typing 8s steps(15),
               caret 1s steps(1) infinite;
}

<div class="panoramic"></div>
/**
 * Smooth state animations
 * Photo credits: https://www.flickr.com/photos/employtheskinnyboy/3904743709
 */
@keyframes panoramic {
    to { background-position: 100% 0; }
}
.panoramic {
    width: 150px; height: 150px;
    background: url('http://c3.staticflickr.com/3/2671/3904743709_74bc76d5ac_b.jpg');
    background-size: auto 100%; 
    animation: panoramic 10s linear infinite alternate;
    animation-play-state: paused;
}
.panoramic:hover, .panoramic:focus {
    animation-play-state: running;
}

<div class="path">
    <div class="avatar">
        <img src="http://lea.verou.me/book/adamcatlace.jpg" />
    </div>
</div>
/**
 * Animation along a circular path - Solution 1
 */
@keyframes spin {
    to { transform: rotate(1turn); }
}
.avatar {
    animation: spin 3s infinite linear;
    transform-origin: 50% 150px;
}
.avatar > img {
    animation: inherit;
    animation-direction: reverse;
}
/* Anything below this is just styling */
.avatar {
    width: 50px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
}
.avatar > img {
    display: block;
    width: inherit;
}
.path {
    width: 300px; height: 300px;
    padding: 20px;
    border-radius: 50%;
    background: #fb3;
}

<div class="path">
    <img src="http://lea.verou.me/book/adamcatlace.jpg" class="avatar" />
</div>
/**
 * Animation along a circular path - Solution 2
 */
@keyframes spin {
    from {
        transform: rotate(0turn)
                   translateY(-150px) translateY(50%)
                   rotate(1turn)
    }
    to {
        transform: rotate(1turn)
                   translateY(-150px) translateY(50%)
                   rotate(0turn);
    }
}
.avatar {
    animation: spin 3s infinite linear;
}
/* Anything below this is just styling */
.avatar {
    display: block;
    width: 50px;
    margin: calc(50% - 25px) auto 0;
    border-radius: 50%;
    overflow: hidden;
}
.path {
    width: 300px; height: 300px;
    padding: 20px;
    margin: 100px auto;
    border-radius: 50%;
    background: #fb3;
}