[CSS] @keyframes
@keyframes swing{
0% { transform: rotate(0deg)}
100% {transform: rotate(-30deg)}
}
#sweetlandia{
animation: swing 2s infinite ease-in-out;
}
Muli-steps keyframes
@keyframes swing {
0% {
transform: rotate(-30deg);
}
50% {
transform: rotate(30deg);
}
100% {
transform: rotate(-30deg);
}
}
#sweetlandia {
animation: swing 2s infinite ease-in-out;
}
@keyframes swing {
0%, 100% { transform: rotate(-30deg); }
20% {transform: scale(0.95)}
80% {transform: scale(0.95)}
50% { transform: rotate(30deg); }
}
#sweetlandia {
animation: swing 2s infinite ease-in-out;
}
More Advanced Keyframe Animations
A fadeIn keyframe animation has been started. Style the element to be completely hidden in its starting state. Hide it in a way that will allow us to fade it in.
@keyframes fadeIn {
0% {
opacity:;
visibility: hidden;
}
100% {
}
}
Complete the animation by making the end state visible.
@keyframes fadeIn {
0% {
opacity:;
visibility: hidden;
}
100% {
opacity:;
visibility: visible;
}
}
Apply the fadeIn animation to the .modal-overlay when it is .active.
@keyframes fadeIn {
0% {
opacity:;
visibility: hidden;
}
100% {
opacity:;
visibility: visible;
}
}
.modal-overlay.active{
animation: fadeIn .25s;
}
Finally, in order to make the overlay stay visible after it is done animating, give the animation a fill-mode of forwards.
@keyframes fadeIn {
0% {
opacity:;
visibility: hidden;
}
100% {
opacity:;
visibility: visible;
}
}
.modal-overlay.active{
animation: fadeIn .25s forwards;
}
Create a slideUp keyframe animation.
Have the slideUp animation start by moving down (translating Y) by 400px.
End the animation by moving up (translating Y) by -300px up the page.
@keyframes slideUp{
from {
transform: translateY(400px);
}
to{
transform: translateY(-300px);
}
}
The fadeIn animation has already been applied for you to the modal when active. Now apply the newly created slideUp animation. Give the animation a0.65s duration with a 0.5s delay.
.modal.active {
animation: fadeIn 0.25s forwards, slideUp 0.65s 0.5s;
}
Give the slideUp animation a custom cubic bezier with these values 0.175, 0.885, 0.32, 1.275. This will cause the modal to slideUp, overshoot the -300px, and then slide back down to its resting spot at -300px. Neat, right?!
Finally, have the modal stay at its final resting state on the page, by giving theslideUp animation a fill-mode of forwards.
@keyframes slideUp{
from {
transform: translateY(400px);
}
to{
transform: translateY(-300px);
}
}
.modal.active {
animation: fadeIn 0.25s forwards, slideUp 0.65s 0.5s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
}
<!DOCTYPE>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Cosplay Happenings</title>
<link href='level3.css' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- Nav -->
<nav class='nav'>
<div class='cell'>
<a class='nav-logo' href='/'>
<div class='shing'>
<img src='logo.png' alt='Sweet Lands' />
</div>
</a>
<ul class='nav-menu'>
<li><a href='#retweets'>Retweets</a></li>
<li><a href='#pictures'>Pictures</a></li>
<li><a href='#event'>Upcoming</a></li>
</ul>
</div>
</nav> <!-- Header -->
<header class='header'>
<div class='cell well'>
<h1 class='header-title'>Cosplay Happenings</h1>
<p class='header-subtitle'>Welcome to our candy-coated community!</p>
</div>
</header> <!-- Most Retweeted -->
<section class='retweets' id='retweets'>
<div class='cell well'>
<h2>Most Retweeted</h2>
<div class='retweet group'>
<img src='unicorn.jpg' alt='Unicorn' width='200' height='200' />
<p>
Sparkles the Unicorn saunters down the Lemony Brick Road and
prances past the Soda Pop River! Her majestic horn points the way
to the Frosting Fortress, as her glittery mane and tail sway in the
bubblegum breeze.
</p>
</div>
<div class='retweet group'>
<img src='fairy.jpg' alt='Fairy' width='200' height='200' />
<p>
Who’s that there in the Candy Corn Fields? Why, it’s Sarsaparilla
the Sherbet Sprite! He’s thoughtfully pondering which treat to
partake of next. The Lollipop Forest is in the distance, in case he
needs a place to rest his sweet head.
</p>
</div>
</div>
</section> <!-- Purchase -->
<section class='pictures' id='pictures'>
<div class='cell well'>
<h2>Pictures</h2>
<ul class='pictures-list group'>
<li><img src='group-01.jpg' alt='Group' width='200' height='200' /></li>
<li><img src='cupcake.jpg' alt='Cupcake' width='200' height='200' /></li>
<li><img src='rainbow.jpg' alt='Rainbow' width='200' height='200' /></li>
<li><img src='donut.jpg' alt='Donut' width='200' height='200' /></li>
<li><img src='dog.jpg' alt='Dog' width='200' height='200' /></li>
<li><img src='fairy.jpg' alt='Fairy' width='200' height='200' /></li>
<li><img src='unicorn.jpg' alt='Unicorn' width='200' height='200' /></li>
<li><img src='group-02.jpg' alt='Group' width='200' height='200' /></li>
</ul>
</div>
</section> <!-- Contact -->
<section class='event' id='event'>
<div class='cell well'>
<h2>Upcoming Event</h2>
<div class='event-content'>
<img src='sweetlandia.png' alt='SweetLandia' id='sweetlandia' width='200' />
<h3>SweetLandia</h3>
<p>
Once upon a time, there was a magical place called Sweet Lands — a
world we may now only travel to in our imaginations. But one
weekend every year, when the sugar cane stalks bend toward the east
and the cotton candy is at its swirliest, the Sweetlandia
convention brings this wondrous world within reach! So join
Sparkles, Pierre, and the rest of the gang for a meeting of the
sweet-minded in sunny Omaha, Nebraska! It’s sure to be your
sweetest adventure yet.
</p>
<div class='event-action'>
<a href='#' class='btn buy-button'>
<span class='top content'>Register Now!</span>
<span class='bottom content'>Hurry, Limited Space!</span>
</a>
</div>
</div>
</div>
</section> <!-- Register Modal -->
<div class='modal-overlay'></div>
<div class='modal'>
<div class='modal-header'>
<a class='modal-close' href='#' aria-label='Close'>×</a>
<h3>Register</h3>
</div>
<div class='modal-content'>
<form class='form' action=''>
<fieldset class='form-field'>
<!-- <label class='form-label' for='type'>CC Type</label> -->
<select class='cs-select cs-skin-elastic' name='type'>
<option value='visa'>Visa</option>
<option value='mastercard'>MasterCard</option>
<option value='american_express'>American Express</option>
</select>
</fieldset> <fieldset class='form-field'>
<input class='form-input' type='text' id='number' />
<label class='form-label' for='number'>CC Number</label>
</fieldset> <fieldset class='form-field'>
<input class='form-input' type='text' id='expiration' />
<label class='form-label' for='expiration'>CC Expiration</label>
</fieldset> <div class='form-submit'>
<input class='btn' type='Submit' value='Submit' />
</div>
</form>
</div>
</div>
<script src='application.min.js'></script>
</body>
</html>
Apply the slideUpSmall animation to the modal's header using a 0.25second duration.
Give the slideUpSmall animation a 0.75 second delay and a fill-mode offorwards.
Nice job! Now apply the slideUpSmall animation to the modal's content using the same duration as before.
Give the slideUpSmall animation for the modal's content a 0.8 second delay and a fill-mode of forwards.
@keyframes fadeIn {
0% {
opacity:;
visibility: hidden;
}
100% {
opacity:;
visibility: visible;
}
}
.modal-overlay.active {
animation: fadeIn 0.25s forwards ;
}
@keyframes slideUp {
from {transform: translateY(400px);}
to {transform: translateY(-300px);}
}
.modal {
transform: translateY(700px);
}
.modal.active {
animation: fadeIn 0.25s forwards,
slideUp 0.65s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes slideUpSmall {
from {transform: translateY(80px);}
to {transform: translateY(0px);}
}
.modal.active .modal-header {
animation: fadeIn 0.25s 0.8s forwards, slideUpSmall 0.25s 0.75s forwards;
}
.modal.active .modal-content {
animation: fadeIn 0.25s 0.85s forwards, slideUpSmall 0.25s 0.8s forwards;
}
<!DOCTYPE>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Cosplay Happenings</title>
<link href='level3.css' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- Nav -->
<nav class='nav'>
<div class='cell'>
<a class='nav-logo' href='/'>
<div class='shing'>
<img src='logo.png' alt='Sweet Lands' />
</div>
</a>
<ul class='nav-menu'>
<li><a href='#retweets'>Retweets</a></li>
<li><a href='#pictures'>Pictures</a></li>
<li><a href='#event'>Upcoming</a></li>
</ul>
</div>
</nav> <!-- Header -->
<header class='header'>
<div class='cell well'>
<h1 class='header-title'>Cosplay Happenings</h1>
<p class='header-subtitle'>Welcome to our candy-coated community!</p>
</div>
</header> <!-- Most Retweeted -->
<section class='retweets' id='retweets'>
<div class='cell well'>
<h2>Most Retweeted</h2>
<div class='retweet group'>
<img src='unicorn.jpg' alt='Unicorn' width='200' height='200' />
<p>
Sparkles the Unicorn saunters down the Lemony Brick Road and
prances past the Soda Pop River! Her majestic horn points the way
to the Frosting Fortress, as her glittery mane and tail sway in the
bubblegum breeze.
</p>
</div>
<div class='retweet group'>
<img src='fairy.jpg' alt='Fairy' width='200' height='200' />
<p>
Who’s that there in the Candy Corn Fields? Why, it’s Sarsaparilla
the Sherbet Sprite! He’s thoughtfully pondering which treat to
partake of next. The Lollipop Forest is in the distance, in case he
needs a place to rest his sweet head.
</p>
</div>
</div>
</section> <!-- Purchase -->
<section class='pictures' id='pictures'>
<div class='cell well'>
<h2>Pictures</h2>
<ul class='pictures-list group'>
<li><img src='group-01.jpg' alt='Group' width='200' height='200' /></li>
<li><img src='cupcake.jpg' alt='Cupcake' width='200' height='200' /></li>
<li><img src='rainbow.jpg' alt='Rainbow' width='200' height='200' /></li>
<li><img src='donut.jpg' alt='Donut' width='200' height='200' /></li>
<li><img src='dog.jpg' alt='Dog' width='200' height='200' /></li>
<li><img src='fairy.jpg' alt='Fairy' width='200' height='200' /></li>
<li><img src='unicorn.jpg' alt='Unicorn' width='200' height='200' /></li>
<li><img src='group-02.jpg' alt='Group' width='200' height='200' /></li>
</ul>
</div>
</section> <!-- Contact -->
<section class='event' id='event'>
<div class='cell well'>
<h2>Upcoming Event</h2>
<div class='event-content'>
<img src='sweetlandia.png' alt='SweetLandia' id='sweetlandia' width='200' />
<h3>SweetLandia</h3>
<p>
Once upon a time, there was a magical place called Sweet Lands — a
world we may now only travel to in our imaginations. But one
weekend every year, when the sugar cane stalks bend toward the east
and the cotton candy is at its swirliest, the Sweetlandia
convention brings this wondrous world within reach! So join
Sparkles, Pierre, and the rest of the gang for a meeting of the
sweet-minded in sunny Omaha, Nebraska! It’s sure to be your
sweetest adventure yet.
</p>
<div class='event-action'>
<a href='#' class='btn buy-button'>
<span class='top content'>Register Now!</span>
<span class='bottom content'>Hurry, Limited Space!</span>
</a>
</div>
</div>
</div>
</section> <!-- Register Modal -->
<div class='modal-overlay'></div>
<div class='modal'>
<div class='modal-header'>
<a class='modal-close' href='#' aria-label='Close'>×</a>
<h3>Register</h3>
</div>
<div class='modal-content'>
<form class='form' action=''>
<fieldset class='form-field'>
<!-- <label class='form-label' for='type'>CC Type</label> -->
<select class='cs-select cs-skin-elastic' name='type'>
<option value='visa'>Visa</option>
<option value='mastercard'>MasterCard</option>
<option value='american_express'>American Express</option>
</select>
</fieldset> <fieldset class='form-field'>
<input class='form-input' type='text' id='number' />
<label class='form-label' for='number'>CC Number</label>
</fieldset> <fieldset class='form-field'>
<input class='form-input' type='text' id='expiration' />
<label class='form-label' for='expiration'>CC Expiration</label>
</fieldset> <div class='form-submit'>
<input class='btn' type='Submit' value='Submit' />
</div>
</form>
</div>
</div>
<script src='application.min.js'></script>
</body>
</html>
[CSS] @keyframes的更多相关文章
- css @keyframes属性 语法
css @keyframes属性 语法 @keyframes是什么?直线电机生产厂家 @keyframes是CSS的一种规则,可以用来定义CSS动画的一个周期的行为,创建简单的动画. 作用:通过 @k ...
- vue 动画框架Animate.css @keyframes
<script src="vue.js"></script> <link rel="stylesheet" href=" ...
- css keyframes动画属性设置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- [TypeStyle] Use TypeStyle keyframes to create CSS animations
We cover CSS keyframes and how to create them using TypeStyle. We then show how to use the keyframes ...
- css中animation和@keyframes 动画
Animation 使用简写属性,将动画与 div 元素绑定: div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infi ...
- 关于 CSS 反射倒影的研究思考
原文地址:https://css-tricks.com/state-css-reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览.该文章篇幅较长,内容庞杂,有 ...
- Css 进阶篇
一.Css2 高阶知识(常用) 1. css 优先权 优先权(从低到高) 浏览器缺省设置 外部样式表 内部样式表(位于 <head> 标签内部) 内联样式(在 HTML 元素内部) 因此, ...
- python css基本操作
1. 概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style ...
- CSS详解
Web前端开发css基础样式总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255 ...
随机推荐
- Android中UI线程与后台线程交互设计的5种方法
我想关于这个话题已经有很多前辈讨论过了.今天算是一次学习总结吧. 在android的设计思想中,为了确保用户顺滑的操作体验.一 些耗时的任务不能够在UI线程中运行,像访问网络就属于这类任务.因此我们必 ...
- C++编译器合成Default Constructor的4种情况
笔记C++编译器为编译器需要合成Default Constructor的4种情况. 1,Class A内含Class B对象,Class A没有Default Constructor时会在编译时合成D ...
- iOS中默认样式修改－b
项目中有大量的UITableView都需要显示sectionHeader.iOS中默认sessionHeader上的textLabel样式跟设计图不符. 按照我们之前的解决方案,是在每个UITable ...
- property测试代码：
// // main.m // TestVar2 // // Created by lishujun on 14-9-4. // Copyright (c) 2014年 lishujun. All r ...
- 【Java】servlet和servlet 容器
servlet不是线程安全的,它通过多线程方式运行其service方法,一个实例可以服务于多个请求,并且其实例一般不会销毁,所以你的项目中如果只有一个servlet,那么web容器就只会创建一个实例 ...
- SQL server 变量、运算符
一.三个表的练习 表一:学生表 student学号:code int (主键)从1开始姓名:name varchar(50)性别:sex char(10)班级:banji char(10)语文教师编号 ...
- leetcode面试准备:Decode Ways
1 题目 A message containing letters from A-Z is being encoded to numbers using the following mapping: ...
- 从 mian 函数开始一步一步分析 nginx 执行流程（三）
如不做特殊说明,本博客所使用的 nginx 源码版本是 1.0.14,[] 中是代码所在的文件! 这一节我们分析ngx_start_worker_processes(),该函数代码比较少,因为它通过调 ...
- bzoj1576 3694
两道题目本质是一样的bzoj1576我们先要用dij+heap处理出最短路径树和起点到每个点的最短路径而bzoj3694已经给出了最短路径树,所以直接dfs即可题目要求的是不走起点到每个点最短路径上的 ...
- bzoj2326
首先不难得出递推式f[i]=(f[i-1]*10^k+i) mod m;f[i]表示接到第i个数时的余数,k表示i的位数不难想到先按位数穷举位数,然后对于确定的位数,构造矩阵解决易得出:f[i] ...