−ボタンアニメーション−

indexに戻る XHTMLについて HTML5について スタイルシート CSS3 PIE Box Shadowエフェクト 角丸いろいろ ダウンロード

テーブル リスト フォーム1 フォーム2デザイン リンク イメージマップ ボーダー Flashタグ FaceBook設定

アイコンフォント アニメーション ボタンアニメ スクロールして固定 フキダシ onクリック タブ

display 画面固定・sticky［CSS］ パララックス［CSS］ フレキシブルボックス［CSS］ CSSハック一覧 CSS小技一覧 CSSサンプル雛形 CSSサンプル [table] CSSサンプル [form] CSSサンプル [flow]

アニメーションの設定

https://animista.net/play/basic

ボタン
https://lab.sonicmoov.com/markup/css/css-button/
http://photoshopvip.net/111009
https://web-bruno.com/css-hover-design/
https://nobu-portfolio.com/html_css/btn01/

CSS Transition　アニメーションCSSタグ

transition-property	アニメーションさせるプロパティを指定します。 transition-property: background-color, opacity;
transition-duration: 0.5s;	変化の開始から終了までの時間を指定します。
transition-timing-function:linear;	ease　最初早く、後ゆっくり linear　一定 ease-in　最初ゆっくり、後早く ease-out　最初早い、後ゆっくり ease-in-out　最初と後がゆっくり、中間が早い
transition-delay: 1.5s;	アニメーション開始までの遅延を指定します。
transition	上記の4つのプロパティを同時に指定します transition: width 1.0s linear, background-color 2.0s ease-in;

【 CSS 】
#sample01 span {
	display: block;
	width: 120px; /* 開始時の幅 */
	height: 80px;
	background-color: #ffcc00;
	transition: 1.5s ease-in 0.5s;
}
#sample01 span:hover {
	width: 300px; /* マウスオーバー時の幅 */
	opacity: 0.6; /* マウスオーバー時の透明度 */
}


<div id="sample01">
	<span></span>
</div>

CSS Animation　アニメーションCSSタグ

animation-name	@keyframesで定義した識別子（名前）を指定します。
animation-duration: 2.0s;	アニメーションにかかる時間を指定します。
animation-timing-function:linear;	ease　最初早く、後ゆっくり linear　一定 ease-in　最初ゆっくり、後早く ease-out　最初早い、後ゆっくり ease-in-out　最初と後がゆっくり、中間が早い
animation-delay: 0.4s;	アニメーション開始までの遅延を指定します。
animation-iteration-count: inifinite;	アニメーションの繰り返し回数を指定します。inifiniteで無制限。3で3回再生
animation-direction	normal アニメーションを順方向に再生 reverse アニメーションを逆方向に再生 alternate アニメーションの繰り返し回数が奇数の場合は順方向、偶数の場合は逆方向に再生 alternate-reverse アニメーションの繰り返し回数が奇数の場合は逆方向、偶数の場合は順方向に再生
animation-fill-mode	none 再生中以外は キーフレームの指定は無効となります forwards 実行後最後のキーフレームの指定を保持します backwards 実行前に最初のキーフレームの指定が適用され、animation-delayの間保持します both forwardsとbackwardsが両方適用されます
animation	全部指定 animation: move02 2s linear infinite alternate;

【 CSS 】
/* 時間経過を%で指定する場合 */
@keyframes [任意の識別子] {
	0% {
		[プロパティ] : [ 値 ];
	},
	40% {
		[プロパティ] : [ 値 ];
	},
	100% {
		[プロパティ] : [ 値 ];
	}
}
/* 開始・終了をfrom, toで指定する場合 */
@keyframes [任意の識別子] {
	from {
		[プロパティ] : [ 値 ];
	},
	to {
		[プロパティ] : [ 値 ];
	}
}

#sample03 {
  display: flex;
  align-items: center;
  justify-content: space-around;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 400px;
}
#sample03 li a {
  display: block;
  margin: 5px;
  padding: 10px;
  width: 5em;
  text-align: center;
  text-decoration: none;
  color: #333;
  background-color: #f3f3f3;
  position: relative;
}
#sample03 li a:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 2px;
  background: #222;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: 0.3s ease-out;
  transform: scaleX(0);
}
#sample03 li a:hover {
  background-color: #efefef;
}
#sample03 li a:hover:after {
  transform: scaleX(1);
}



<ul id="sample03">
	<li><a href="#">menu1</a></li>
	<li><a href="#">menu2</a></li>
	<li><a href="#">menu3</a></li>
</ul>

ボタンの装飾1

<div class="btm btm_effect1"><a href="">今すぐ予約する</a></div>


/*--------------------------------------------------------

ボタン装飾

--------------------------------------------------------*/
.btm {
	width: 400px;
	height: 50px;
	border:solid 3px #ed0000;
	border-radius:50px;
	margin-left:auto;
	margin-right:auto;
}
.btm_effect1 a {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 50px;
	color: #ed0000;
	text-align: center;
	font-size: 1.2em;
	text-decoration: none;
	position: relative;
	z-index: 2;
}

.btm_effect1 {
	overflow: hidden;
}
.btm_effect1 a:before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-color: #ed0000;
	transition: all 300ms ease-out;
}
.btm_effect1 a:hover {
  color: #000;
}
.btm_effect1 a:hover:before {
  left: 0;
}

ボタンの装飾2

.btm_animation{
	width:550px;
	background: linear-gradient(#faecc8, #f0c14c);
	border:solid 1px #9c7e31;
	border-radius:6px;
	margin-left:auto;
	margin-right:auto;	
}
.btm_animation a{
	text-decoration:none;
	display:block;
	padding:20px 20px;
	font-size:1.5em;
	color:#272727;
}
.btm_animation a:link{color:#272727;}
.btm_animation a:visited{color:#272727;}
.btm_animation a:hover{color:#272727;}
.btm_animation a:active{color:#272727;}




/*ボタンぶるぶる*/
.buruburu {
    -webkit-animation:buruburu 0.1s infinite linear alternate;
    animation:buruburu 0.1s infinite linear alternate;
}

@-webkit-keyframes buruburu {
    0% {-webkit-transform:translate(0, 0) rotate(-3deg);}
    50% {-webkit-transform:translate(0, -1px) rotate(0deg);}
    100% {-webkit-transform:translate(0, 0)rotate(3deg);}
}

@keyframes buruburu {
    0% {transform:translate(0, 0) rotate(-3deg);}
    50% {transform:translate(0, -1px) rotate(0deg);}
    100% {transform:translate(0, 0)rotate(3deg);}
}


/*ボタンくるくる1*/
.kurukuru{
	backface-visibility : visible;
	animation: rotate 5s ease infinite;
	/*animation-iteration-count :1;*/
}
@keyframes rotate {
	from { transform: rotateY(0deg); }
	to { transform: rotateY(360deg); }
}
/*ボタンくるくる2*/
.kurukuru2{
	animation : sample1Anime 5s ease 0s infinite;
}
@keyframes sample1Anime{
100% {transform :rotateX(360deg);}
}



.button,
.button span {
  position: relative;
  display: inline-block;
}
.button span {
  padding:20px 20px;
  font-size:1.5em;
	background: linear-gradient(#faecc8, #f0c14c);
	border:solid 1px #9c7e31;
	border-radius:6px;
  color: #272727;
  text-decoration: none;
  text-align: center;
  -webkit-animation: 3s float ease-in-out infinite;
  animation: 3s float ease-in-out infinite;
}
.button::after {
  position: absolute;
  bottom: -15px;
  left: 50%;
  z-index: -1;
  content: '';
  width: 100%;
  height: 24px;
  background-color: rgba(0,0,0,.1);
  border-radius: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-animation: 3s shadow ease-in-out infinite;
  animation: 3s shadow ease-in-out infinite;
}
@-webkit-keyframes float {
  50% {
    -webkit-transform: translateY(-10px);
  }
}
@keyframes float {
  50% {
    transform: translateY(-10px);
  }
}
@-webkit-keyframes shadow {
  50% {
    width: 70%;
    height: 18px;
  }
}
@keyframes shadow {
  50% {
    width: 70%;
    height: 18px;
  }
}


/*拡大縮小*/
.cv_btn {
  margin: 0 auto;
}
.cv_btn span {
  animation: anime1 0.5s ease 0s infinite alternate;
  transform-origin:center;
}
@keyframes anime1 {
  from {
    transform: scale(0.9,0.9);
  }
  to {
    transform: scale(1,1);
  }
}


.kakudai {
	width:550px;
	background: linear-gradient(#faecc8, #f0c14c);
	border:solid 1px #9c7e31;
	border-radius:6px;
	display: inline-block;
	padding:20px 20px;
	font-size:1.5em;
	margin-left:auto;
	margin-right:auto;	
}

.kakudai:active {
  position: relative;
  top: 7px;
  box-shadow: none;
}
a.kakudai{
	text-decoration:none;
	display:block;
	color:#272727;
}
a.kakudai:link{color:#272727;}
a.kakudai:visited{color:#272727;}
a.kakudai:hover{color:#272727;}
a.kakudai:active{color:#272727;}


/*--- cssアニメーション ここから ---*/
.keyframe {
	animation-name: anim_sc;
	transform: scale(0.8, 0.8);
}

@keyframes anim_sc {
  100% {
    transform: scale(1, 1);
  }
}

.animation {
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 0.2s;
}

/*--- cssアニメーション ここまで ---*/