[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 ...
随机推荐
- 转：Ext GridPanel根据条件显示复选框
Ext GridPanel实现复选框选择框: var selectModel = new Ext.grid.CheckboxSelectionModel({ singleSelect : false ...
- Python学习 - 编写自己的ORM(2)
上一篇文章简单的实现了ORM(对象关系模型),这一篇文章主要实现简单的MySQL数据库操作. 想要操作数据库,首先要建立一个数据库连接.下面定义一个创建数据库连接的函数,得到一个连接叫做engine. ...
- PANGU---Planet and Asteroid Natural scene Generation Utility
PANGU是由英国dundee邓迪大学开发的一款行星.小行星自然环境仿真软件 https://www.star-dundee.com/products/pangu-planet-and-asteroi ...
- FTP原理和cent OS vsFTPd架设
1.ftp为明码传输 2.客户端和服务端采用两条链路来分别进行命令和数据的传输.数据传输的模式分为主动链接和被动链接. 3.客户端在需要数据的时候,会告知服务器端采取主动或者被动的方式来链接. 4.如 ...
- http server v0.1_http_parse.c
#include <stdio.h> #include <string.h> #include <stdlib.h> #include "mime.h&q ...
- 自定义元素–为你的HTML代码定义新元素
注意:这篇文章介绍的 API 尚未完全标准化,并且仍在变动中,在项目中使用这些实验性 API 时请务必谨慎. 引言 现在的 web 严重缺乏表达能力.你只要瞧一眼“现代”的 web 应用,比如 GMa ...
- 【POJ11855】 Buzzwords （后缀数组）
Description The word “the” is the most commonthree-letter word. It evenshows up inside other words, ...
- AStyle代码格式工具在source insight中的使用
一.AStyle下载路径 Astyle为开源项目,支持C/C++和java的代码格式化 Home Page: http://astyle.sourceforge.net/ Project Page: ...
- android——彻底关闭——应用程序
最近学习做android的游戏开发时候,发现一个关于android退出时不能彻底关闭的问题,比如:一个程序里new 出了N多个Thread,这样在退出程序的可能不能完全关闭,最后发现,只用finish ...
- 7.微软AJAX的解决方案
Asp.net中内置的简化AJAX开发的控件UpdatePanel非常方便,但是它会带了许多viewstate,所以高手们并不喜欢它.但它开发在内网应用时可以考滤 放入ScriptManager,将要 ...