<!DOCTYPE html>
<html lang="ja">
<!-- Head tag -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" type="image/png" href="https://contents.ogatism.net/ogatism.png">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
<!--Description-->
<meta name="description" content="css3というものは非常に色々なことができる。
特にアニメーション周りは非常に強いです。
さてアニメーションってのはjQueryでもできたのだが、どちらを使ったほうがいいのだろうか。">
<!--Author-->
<meta name="author" content="Yuji Ogata">
<!--Open Graph Title-->
<meta property="og:title" content="アニメーションをcssでやるかjavascriptでやるか"/>
<!--Open Graph Site Name-->
<meta property="og:site_name" content="ogatism"/>
<!--Page Cover-->
<meta property="og:image" content=""/>
<!-- Title -->
<title>アニメーションをcssでやるかjavascriptでやるか - ogatism</title>
<style>
</style>
<!-- Custom CSS -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-43476132-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-43476132-1');
</script>
<meta name="generator" content="Hexo 7.3.0"><link rel="alternate" href="/feed.xml" title="ogatism" type="application/atom+xml">
</head>
<body>
<div class="container zinnia-page">
<header>
<div class="zinnia-logo text-center">
<h1><a href="index.html"><img src="https://contents.ogatism.net/ogatismlogoB1.png" alt="" width="800" height="320" class="blog-header"></a></h1>
</div>
<div class="zinnia-menu text-center">
<nav class="navbar">
<div class="navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="/categories/fortune/">オガティの星占い</a></li>
<li><a href="/about/">オガティとは</a></li>
<li><a href="/post/swiss/swiss_index/">Swiss Ephemeris</a></li>
<li><a href="/biz/">依頼・問い合わせ</a></li>
</ul>
</div>
</nav>
</div>
</header>
<div class="zinnia-main-content">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<article class="single-blog-post">
<div class="post-header text-center">
<div class="single-tag">
<a href="/categories/diary/">雑記</a>
</div>
<h2 class="post-title">
<a href="/post/css-or-js">アニメーションをcssでやるかjavascriptでやるか</a>
</h2>
</div>
<div class="post-thumb">
<a href="/post/css-or-js"> <img src="https://contents.ogatism.net/ogatismlogoC1.png" alt=""></a>
<div class="post-overlay-meta">
<ul class="post-meta pull-left">
<li class="date">2016/03/04</li>
</ul>
</div>
</div>
<div class="post-content">
css3というものは非常に色々なことができる。
特にアニメーション周りは非常に強いです。
さてアニメーションってのはjQueryでもできたのだが、どちらを使ったほうがいいのだろうか。
<span id="more"></span>
実はjQueryとかjavascriptってのはcpuで処理するのだけど、cssはgpu、グラフィック制御で処理する。
だからcpuパワーを使わないらしいのです。
個人的にはjavascriptのほうが好きなのですが、hoverとかループ系アニメーション程度ならcssで書くべきらしいのですよねえ。
とは言ってもhover以外のトリガーを要するイベント、clickとかスクロールとかショートカットキーなんかはjavascriptの世界になるのだけどね。
それにやっぱりcssで書くのはtransition、animationを始めとして要素が多くて分かりづらいし。
ちょっとしたアニメーション程度ならどっちでもたいして変わらないし。
css3がメジャーになればなるほどcssがメインになるのか、それともES6によってjavascriptがメインになるのかは分からないけど、フロントサイドエンジニアはやっぱりどちらも書けるようにしておいたほうがいいですね。
どちらかを使わざるを得ないってこともあり得るので。
</div>
<div class="single-post-meta ">
<div class="single-tag ">
</div>
</div>
</article>
</div>
</div>
</div>
<hr>
</div>
<footer class="zinnia-footer">
<div class="container">
<div class="footer-social">
<div class="footer-logo text-center">
オガティ（緒形雄二）
</div>
<div class="footer-social-link">
</div>
</div>
</div>
<div class="container footer-copyright-text text-center">
<p>
© 2012-2026 ogatism/Yuji Ogata<br>
© 2017 Zinnia - Designed & Developed by <a href="">ShapedTheme</a>
</p>
</div>
</footer>
<!-- After footer scripts -->
</body>
</html>